Skip to content
Try free

Link

Navigation to another page or place, always underlined. Inline in sentences, or standalone at 44px.

  • Free core, MIT
  • Version 2.0.0-rc.1
  • APG pattern: Link

Examples

These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.

Default

Invoices go to the address in billing settings. You can change it at any time.

Read more about team plansHelp centre (opens in a new tab)
Show the code

Default, code

<div className="flex flex-col gap-stack-sm">
  <p className="text-body-md text-fg">Invoices go to the address in <Link href="#billing">billing settings</Link>. You can change it at any time.</p>
  <Link href="#plans" variant="standalone" srSuffix=" about team plans">Read more</Link>
  <Link href="https://example.com/help" variant="standalone" isExternal>Help centre</Link>
</div>

Standalone

Show the code

Standalone, code

<Link href="#billing" variant="standalone">Billing settings</Link>

External

Show the code

External, code

<Link variant="standalone" isExternal href="https://example.com">Status page</Link>

Tokens

The 6 design tokens Link reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 6 tokens
Tokens Link reads
TokenValue nowCSS variable
color.text.disabled…--sd-color-text-disabled
color.text.link…--sd-color-text-link
color.text.link-pressed…--sd-color-text-link-pressed
radius.xs…--sd-radius-xs
spacing.gap.xs…--sd-spacing-gap-xs
target.min…--sd-target-min

Install

The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).

Install

npm i @superduperui/react @superduperui/tokens

Import

import { Link } from "@superduperui/react"

Props

Link also takes the props of the React Aria component it’s built on.

Link props
PropTypeWhat it does
childrenrequiredReactNodeThe visible link text. Say where it goes ("Billing settings"), never "click here".
variant'inline' | 'standalone'Default 'inline'inline: underlined text inside a sentence (exempt from the 44px target rule). standalone: a link on its own line, 44px tall.
srSuffixstringExtra words for screen readers only, so the link makes sense out of context (2.4.9), e.g. " about team plans".
isExternalbooleanOpens in a new tab: adds an icon and the hidden words "(opens in a new tab)" (3.2.5).

When to use it

Use it for

  • Going to another page or section
  • Inline references in running text

Use something else for

  • Actions that change something: use Button
  • Link-styled actions: use Button variant="link"

Accessibility

Screen readers announce "Read more about team plans, link"; external: "Help centre (opens in a new tab), link".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.

Compact density meets AA (2.5.8, 24px targets), not AAA.

What your product still has to do

  • Write link text that says where it goes
  • Use isExternal for every link that opens a new tab

Shared patterns it ships with: 2.4.9 (srSuffix makes the purpose clear from the link alone); 3.2.5 (isExternal warns before a new tab).

This release’s test results

Test results for Link in this release
axe-core (WCAG A, AA, AAA and best practice)80 runs across every story, theme, density and width: 0 violations
Rendered text contrast160 text runs: 0 below 7:1, lowest 8.42:1
Target size18 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)54 focus stops in 3 browser engines: all pass
Keyboard scriptChromium 5 of 5, Firefox 5 of 5, WebKit 5 of 5

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

Link keyboard steps
KeyWhat happens
TabTab reaches the inline link
TabTab reaches the standalone link, named with its hidden suffix
TabTab reaches the external link, which says it opens a new tab
Shift+TabShift+Tab goes back
EnterEnter follows the link

In Figma

The Figma component is Link, with Variant (Inline, Standalone); State (Default, Hover, Focus, Pressed, Visited, Disabled). The Figma library isn’t published yet.

Figma to code: Variant → variant (Inline = "inline", Standalone = "standalone"); State (Default, Hover, Focus, Pressed, Visited, Disabled = isDisabled); Label → children; External → isExternal.