Skip to content

Link

Stable

Links navigate. If a control changes data or opens a surface rather than moving somewhere, it is a Button — the distinction is what makes middle-click, back and “open in new tab” work as people expect.

Added in v1.0.0 · import from "@borneo/react"

Interactive previewPermalink to this section

Three variants covering running text, navigation lists and low-emphasis utility links.

Variant
Destination
link-preview.tsx
<Link
  href="/docs/foundations/color"
  variant="inline"
>
  Read the color foundation
</Link>

AnatomyPermalink to this section

VariantsPermalink to this section

Inline links are underlined because colour alone is not enough to mark a link inside a paragraph.

See the token architecture for details.

Inline

Inside running text

Standalone

Navigation and card titles

Quiet

Footers and metadata

StatesPermalink to this section

Links use the same focus treatment as every other interactive element in the system.