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

<HStack gap={12} wrap>
  <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>
  <Link href="/docs" variant="primary-button">Primary action</Link>
</HStack>

#Import

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

Use primary-button for prominent navigation actions. It preserves native link behavior, including opening in a new tab and copying the destination. Use Button for actions that change the current interface or submit a form.

#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, button, or primary-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.