Actions
Link
Link is semantic navigational text styled as inline or standalone links — not for primary actions.
Style × Size × State — 45 variants
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.4.0-beta
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.
Live preview
Semantic anchors for navigation — not primary actions.
Internal / External / Inline
Links stay underlined by default so they are never identified by color alone. Use Button for actions that do not navigate.
Focus and comparison
Tab to a link to see the focus ring. External links opened in a new tab receive rel="noopener noreferrer" by default.
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".
Tokens used
semantic/text/secondarysemantic/action/primarysemantic/action/dangercolor/brand/600color/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. |
| 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>
);
}