You're in the Library

Link

Takes the user to another page, section or site. Underlined in running text so it is never identified by color alone.
Stable
Edit

Preview appears after the next Storybook update.

Link example
<Link>Read the token guidelines</Link>
Rendered with the real componentFrom the code
Light
Dark

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.

Do

Link text says where it goes

Screen reader users jump between links out of context: "Read the token guidelines" works alone, "here" does not.

Don't

"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.

Content guidelines

  • Describe the destination, not the action of clicking.
  • Keep it short: three to six words is ideal.
  • Do not end link text with punctuation or an arrow glyph.

From the code Generated from the component, not editable here.

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.

13 tokens7 semantic or component, change with theme and brand6 from the shared scales

Motion and interaction

Link animates on hover. Try it in the preview at the top.

WhenWhat changesDurationEasing
HoverText color and underlinemotion.duration.instant75 msmotion.easing.standardsettles in place

With reduced motion turned on, every change happens at once.

From the code Generated from the component, not editable here.

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.

PropTypeDefaultDescription
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`.
externalbooleanfalseOpens in a new tab: adds target, rel, an icon and "(opens in a new tab)" for screen readers.
renderReactElementnoneRender 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.

Code for these props
<Link href="#">Read the token guidelines</Link>

variant

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

From the code Generated from the component, not editable here.

Changelog

  • New

    An exploration remembers the screen it changed, and every preview link and capture opens there

    v1.0.0, Nov 11, 2026

  • New

    A design lead answers an exploration with the review bar at the bottom of its page: a comment, Comment (a question, no verdict), Needs changes, Looks right (its words go to the developers), Ask someone else to review, Not doing this and Copy link

    v1.0.0, Nov 11, 2026

  • New

    Exploration page "..." menu: Rename (the pull request title and the exploration's name in its body, the branch and preview link unchanged) and Back to exploring (undoes Done exploring while no developer has pushed since: the developer section and the done marker leave the body, the exploration label comes back, ready-for-devs goes; a refused label write still succeeds through the body)

    v1.0.0, Nov 11, 2026

  • New

    Suggestions can link Figma nodes: links.figma.nodes (optional { nodeId, url?, name?, state?: "before" | "after" }[], payloads without it are unchanged)

    v1.0.0, Nov 11, 2026

  • 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)

    v1.0.0, Nov 11, 2026

  • New

    Actions: Button gains danger variant, lg size, iconStart, iconEnd, fullWidth and render (a link stays a link); loading keeps focus

    v1.0.0, Nov 11, 2026

  • New

    The toolbar reads a change of a private product: Bridge Studio hands a member's tab a short-lived read pass in the link's fragment, the toolbar takes it out of the address, keeps it for the tab and sends it with its reads through Bridge

    v1.0.0, Nov 11, 2026

  • New

    The adoption report inside Bridge: Studio > Quality > a product opens /studio/<team>/quality/report/?product=<key> (the whole Adoption row is the link; "Download JSON" moves to the report's header)

    v1.0.0, Nov 11, 2026

  • New

    Invites by email, the server side: /api/invites keeps pending invites (email, role, team, who invited, expiry, only a hash of the link token) in an Upstash Redis store, emails a one-time link through Resend, and once the invitee signs in with GitHub gives their account access with the role's permission (Can view: read, Can edit: write, Reviewer: write plus a pull request listing them as design or tech owner, Admin: admin) using the Bridge Direct app's installation token

    v1.0.0, Nov 11, 2026

  • New

    Library access, server: /api/library-access stores who reads each team's Library (Anyone with the link, Anyone with a work email at listed domains, Only the team; admins only, checked on GitHub), emails readers a one-time sign-in link (15 minutes, only its hash kept, exact domain match, consumer domains refused), and opens a signed httpOnly session cookie for that team's Library (30 days, ended at once when the setting changes)

    v1.0.0, Nov 11, 2026

  • New

    Library access, Studio and Library: Settings has a Library access band (who reads the library: Anyone with the link, Anyone with a work email at your domains, Only the team; admins change it, everyone else reads it) with Copy library link to share it with the company

    v1.0.0, Nov 11, 2026

  • New

    A team's Bridge says who gets in: one screen per GitHub access state (sign in first, no access with "Ask your lead for access", Bridge not set up with the install link for admins only, read only outside the team), a team chip at the top of the Studio side nav with your access, and "Invite your team" (the team link, "Who can do what", Manage access on GitHub for admins) as an onboarding step and in Settings

    v1.0.0, Nov 11, 2026

  • Fix

    Cloudflare Pages previews: read the HTML table Cloudflare really posts in its check run (<strong>Preview URL:</strong> with an <a href> link, and Branch Preview URL: on preview branches), not only Markdown rows

    v1.0.0, Nov 11, 2026

  • Fix

    "Done exploring" replaces "Promote to review" for explorations: the pieces the designer ticks go to the DS lead as requests with a link to the preview, the exploration label gives way to ready-for-devs, and developers take the branch as a starting point (git fetch origin, git checkout explore/<name>)

    v1.0.0, Nov 11, 2026

  • Fix

    Previews: a repository with one Vercel project reports its builds as plain "Vercel"; Bridge now reads the project from the build link, so those explorations get their preview

    v1.0.0, Nov 11, 2026

  • Fix

    Figma plugin, Try it: a preview that failed before it had a link (a Vercel build rate limit) now says "This preview did not build" instead of waiting forever, and polling stops

    v1.0.0, Nov 11, 2026

  • Fix

    Component specs for Figma: a content-box min-height or min-width counts its padding and border, as CSS draws it (checkbox, radio, switch, link rows were 3px short in Figma)

    v1.0.0, Nov 11, 2026

  • Fix

    Hardening: deleting a Bridge account ends its connections in Claude and deletes the GitHub tokens Bridge kept sealed for them; the Figma plugin hand-off keeps the GitHub token sealed while it waits, bound to its own link; the hosted connector never merges (bridge_merge_branch is neither listed nor run there, a person merges from Studio or GitHub)

    v1.0.0, Nov 11, 2026

  • Fix

    A page on the design copy's preview host reads the copy's changes even when neither the host nor the link named the repository (Cloudflare Pages sets no repository variable): ?bridge=1 there is exploration #1 of the copy, never the design system's or the developers' change #1

    v1.0.0, Nov 11, 2026

  • Fix

    An exploration link opens from its own read, without waiting for the whole Changes list

    v1.0.0, Nov 11, 2026

  • Fix

    Studio setup: "Invite your team" now invites people by email with a role (the Invite collaborators dialog) instead of sharing a link

    v1.0.0, Nov 11, 2026

  • Fix

    The Install Bridge Direct link on team pages points to the real app, bridge-design-studio, by default

    v1.0.0, Nov 11, 2026

  • Fix

    Every Studio link, redirect and Studio file fetch goes through studioHref(path) (lib/team-path.ts, also exported from lib/nav.ts), multi-team PR 2d

    v1.0.0, Nov 11, 2026

  • Fix

    Studio Components: the Open requests column leaves the table (teams triage requests in Jira); the component drawer still counts them with a link to GitHub

    v1.0.0, Nov 11, 2026

  • Fix

    Library: the GitHub link moves from the top bar to the foot of the side nav, where Studio keeps the GitHub account

    v1.0.0, Nov 11, 2026

  • Fix

    Click targets: token rows (name, copy, menu, uses chip), the Studio row menu, the logo link, changelog refs and Quality actions are at least 32px tall; standalone links at least 24px

    v1.0.0, Nov 11, 2026

  • Fix

    Idle Pull and Push screens explain the flow in three steps instead of a Source card with a Change link

    v1.0.0, Nov 11, 2026

  • Fix

    Plugin screens in the Field Guide layout: a Harbor intro with a line drawing on every idle, connect and result screen, a Source card, Settings as cards with a link to create a token, Deep Harbor tab indicator

    v1.0.0, Nov 11, 2026

All release notes

Updated Nov 11, 2026
View source

Generated from 4 files