Link
StableTakes the user to another page, section or site. Underlined in running text so it is never identified by color alone.
When to use
Use it for
- Navigation: another page, a section of this page, an external resource.
- Inline in sentences (inline variant), or on its own under a card or a table (standalone).
- external for other sites: it opens a new tab and says so.
Not for
- Actions on this screen (save, delete, open a dialog): use Button.
- Navigation that should look like a button (a single call to action): use Button with render={<a href />}.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Link text says where it goes
Screen reader users jump between links out of context: "Read the token guidelines" works alone, "here" does not.
"Click here" or a bare URL
Both say nothing about the destination.
Accessibility
- Native <a href>: Enter follows it, it is announced as a link, Cmd or Ctrl+click opens a new tab.
- Inline links are underlined (WCAG 1.4.1): color is never the only cue inside text.
- external adds target=_blank, rel=noopener noreferrer, an icon and "(opens in a new tab)" for screen readers.
- Focus ring hugs the text with a 1px offset so it does not overlap neighbouring lines.
Anatomy and tokens
Read from packages/react/src/components/Link/Link.module.css at build time. Every value is a token: open one to see its
alias chain in both themes.
- Anchor
.link - Anchor, hover
@media (hover: hover) .link:hover - Anchor, focus
.link:focus-visible - Standalone variant (underline on hover)
.standalone - Subtle variant (inherits text color)
.subtle - External icon
.externalIcon
Props
Parsed from the TypeScript types in packages/react/src/components/Link/Link.tsx, so this table cannot drift from the
code.
It also accepts every native <a> attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'inline' | 'standalone' | 'subtle' | 'inline' | `inline` sits in running text (always underlined); `standalone` stands alone (underline on hover); `subtle` inherits the text color. Default `inline`. |
external | boolean | false | Opens in a new tab: adds target, rel, an icon and "(opens in a new tab)" for screen readers. |
render | ReactElement | none | Render a router link instead of `<a>`: `render={<RouterLink to="/tokens" />}`. |
Playground
Change the props and see the real Link update. Controls are generated from the TypeScript props; nothing here changes the system.
<Link href="#">Read the token guidelines</Link>Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Link in Storybook) .
Embed Storybook stories here (4)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay
empty.
Inline
Standalone
External
AllStates
Changelog
- New
bridge audit counts every visible UI instance: router links outside a DS component's `render` prop (react-router, ra-core `LinkBase`, next/link), anchors with `href`, images and chart libraries (recharts, Nivo, Chart.js..., foreign with no DS equivalent). Providers and other non-visual parts no longer count as DS instances.
Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026
- New
Actions: Button gains `danger` variant, `lg` size, `iconStart`, `iconEnd`, `fullWidth` and `render` (a link stays a link); loading keeps focus. New IconButton, ButtonGroup (spaced or attached) and Link (inline, standalone, subtle, external).
Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026