Link

Link defines how EnterUI handles a token-driven anchor for inline, muted, underlined, and button-like navigation, including default structure, accessible states, and token-driven styling.

#Default usage

<div className="docs-preview-row">
  <Link href="/docs">Default</Link>
  <Link href="/docs" variant="muted">Muted</Link>
  <Link href="/docs" variant="subtle">Subtle</Link>
  <Link href="/docs" variant="underline">Underline</Link>
  <Link href="/docs" variant="button">Button link</Link>
</div>

#Import

import { Link as EnterLink } from "@froggdesign/enter-ui-react";

#External links

<Link external href="https://example.com">
  External
</Link>

#Accessibility

Link renders a native a. The external prop sets target="_blank" and rel="noreferrer". Use an alias such as EnterLink when composing with Next.js Link.

#API

• variant: default, muted, subtle, underline, or button.
• external applies safe external-link attributes.
• Includes native anchor props and className.

#Styling

Uses .eui-link classes and inherits typography from the current surface.