Link

Text link (React Aria Link) for navigation; use Button for actions.

Import

import { Link } from '@marbleui/ui'

Props

<Link>

Prop	Type	Default	Description
variant	`'accent' \| 'underline' \| 'subtle'`	`'accent'`

Also accepts React Aria props (104).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Link. Follow the primitive's docs for the full keyboard map.

Usage notes

Text link for navigation. For actions that don’t navigate use Button.

<Link href="/docs">Read the docs</Link>
<Link href="https://example.com" variant="underline">Example</Link>

variant is accent (default), underline or subtle.
Extends React Aria Link: href, isDisabled, onPress and routing integration work as in React Aria.
Link text should make sense out of context; avoid “click here”.
linkStyles is exported if you need link styling on another element.

Example source · show

import { Link } from './link'

export const styles = {
  Accent: () => (
    <p className="max-w-sm text-sm text-fg-muted">
      By continuing you agree to our <Link href="#">Terms</Link> and <Link href="#">Privacy Policy</Link>.
    </p>
  ),
  Underline: () => (
    <p className="max-w-sm text-sm text-fg-muted">
      Read the <Link variant="underline" href="#">migration guide</Link> before upgrading.
    </p>
  ),
  Subtle: () => (
    <nav className="flex gap-4 text-sm">
      <Link variant="subtle" href="#">Docs</Link>
      <Link variant="subtle" href="#">Changelog</Link>
      <Link variant="subtle" href="#">Status</Link>
      <Link variant="subtle" isDisabled>Careers</Link>
    </nav>
  ),
}

Source: packages/ui/src/link/link.tsx

Catalog

Category: navigation
Priority: Foundation
Primitive: react-aria
React Aria: Link