Actions
Link
Link is semantic navigational text styled as inline or standalone links — not for primary actions.
Style × Size × State — 45 variants
stableReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 1.0.0
Known open questions
- Visited link styling is not confirmed in Figma — omitted in Beta.
- Disabled link styling is not confirmed — use non-navigating text instead.
Purpose
Inline or standalone navigational/action text, styled to read as part of the content rather than a standalone control.
Anatomy
Link = semantic anchor + underlined label + optional leading/trailing icon.
Variants and states
default · subtle · danger
When to use
Navigating to another page or view, or a lower-emphasis action embedded in body text or a list.
When not to use
For the primary action in a form or flow — use Button. Links carry less visual weight and shouldn't be the only way to complete an important task.
Accessibility
Renders as a real <a>, not a <button> or <span>. Always underlined by default — a fixed baseline, not a toggle — so link-vs-plain-text is never conveyed by color alone. This was a deliberate accessibility decision made after an earlier draft included a non-functional underline toggle property.
Keyboard behavior
Native link focus and activation. Visible focus ring via semantic/focus-ring.
Common mistakes
Using Link where Button is semantically correct (e.g. a form submit action) — affects both code semantics and user expectation.
Properties
Style × Size × State as variants. Label (text). Show trailing icon (boolean) + Trailing Icon (instance-swap).
When should a Link be used instead of a Button?
Use Link for navigation that changes location. Use Button for actions that submit, confirm, or mutate state.
How should external links be identified?
Adjacent text should communicate destination when possible. External targets use safe rel defaults with target="_blank".
Why does Subtle Default differ from Figma Secondary?
React Subtle Default keeps semantic/text/secondary (#5B5F68) for WCAG AA normal-text contrast. Figma Secondary Default uses content-muted (#A0A3AC), which fails AA on white. Subtle Hover and Pressed use semantic/text/primary (#17181B).
Tokens used
semantic/text/secondarysemantic/action/primarysemantic/text/dangercolor/brand/700semantic/focus-ring
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | Destination URL. |
| variant | "default" | "subtle" | "danger" | "default" | Visual style. |
| size | "sm" | "md" | "lg" | "md" | Text size. |
| leadingIcon | ReactNode | — | Decorative leading icon (React extension; Figma exposes trailing only). |
| trailingIcon | ReactNode | — | Decorative trailing icon. |
React example
Copy React example
import { Link } from "@/components/ui/Link";
export function Example() {
return (
<p>
Read the <Link href="/components/button">Button documentation</Link> for action patterns.
</p>
);
}