Navigation

Link

Text that goes somewhere. Use Button for actions.

import { Link } from "@flinbu/seed";

Inline, external, standalone and subtle

Seed follows WCAG 2.2 AA in Light and Dark. Read the quick reference (opens in a new tab).

import { Inline, Link, Stack } from "@flinbu/seed";

<Stack gap="sm" className="max-w-md">
  <p className="m-0 text-primary body-body-2-regular">Seed follows <Link href="#">WCAG 2.2 AA</Link> in Light and Dark. Read the <Link href="https://www.w3.org/WAI/WCAG22/quickref/" external>quick reference</Link>.</p>
  <Inline gap="base"><Link href="#" variant="standalone">View the changelog</Link><Link href="#" variant="subtle">Back to tokens</Link></Inline>
</Stack>

Use it for

Inline links, Back links, View all.

Props

Prop	Type	Default	Description
`variant`	`'default''subtle''standalone'`	`'default'`	Weight.
`external`	`boolean`	–	New tab.
`icon`	`IconProp`	–	Leading icon. An element like <Search /> (works in server components) or, in client components, the component itself.
`asChild`	`boolean`	–	Style your router Link.

Accessibility

external opens a new tab with rel=noopener and says so to screen readers.