Link
Inline navigation element for text-level links with optional icon slots, visited state, and accessible disabled handling.
Anatomy
- 1 Start icon (optional) — decorative icon before text
- 2 Label text — the clickable text content
- 3 End icon (optional) — decorative icon after text, commonly for external links
Options
States
Table of options
| Property | Values | Default |
|---|---|---|
| href | URL string | # |
| startIcon | Icon name or element | — |
| endIcon | Icon name or element | — |
| disabled | true / false | false |
Behaviors
Inline link within body text.
Inline usage
Links inherit the surrounding font size and sit inline with text content.
Disabled state
A disabled link has no href, uses aria-disabled="true" and tabindex="-1". It is not focusable and does not navigate.
Usage guidelines
Link vs Button
Do
Use a link for navigation to a new page or resource.
Don't
Don't use a link for actions that don't navigate. Use a button instead.
Descriptive text
Do
Use descriptive link text that explains the destination.
Don't
Avoid generic link text that has no meaning out of context.
Content standards
- Link text should describe the destination or action clearly. - Keep link text concise — 2–5 words is ideal. - Avoid "click here", "read more", or "learn more" without context. - For external links, consider adding a trailing icon to signal navigation away from the site.Keyboard interactions
| Key | Interaction |
|---|---|
| Tab | Moves focus to the link. |
| Enter | Activates the link (navigates). |
| Shift+Tab | Moves focus away from the link. |
Accessibility
- Uses semantic `` element with native keyboard and screen reader support. - Disabled links use `aria-disabled="true"` and `tabindex="-1"` to remove from tab order. - Disabled links have no `href` attribute — prevents navigation via assistive technology. - Link text must be meaningful in isolation (WCAG 2.4.4). - Icon-only links are not supported — always include visible text. - Focus indicator meets 3:1 contrast via shared `--color-focus` token. - Color alone does not identify links — underline provides a secondary visual cue (WCAG 1.4.1).Theming
Link adapts automatically across brands and color modes through component tokens. Use the hero preview switches above to see it in action. For the full theming architecture see [Foundations: Theming](/foundations/theming/).Design checklist
All interactive statesDefault, hover, active, visited, focus, and disabled states are implemented.
All color themesWorks across light and dark modes for all brands.
Accessible use of colorUnderline provides secondary identification beyond color (WCAG 1.4.1).
Accessible contrast for textText contrast ratio of at least 4.5:1 (WCAG 1.4.3).
Content standardsLink text guidelines documented.
Defined optionshref, startIcon, endIcon, disabled options documented.
Defined behaviorsInline usage and disabled behavior documented.
Usage guidelinesLink vs button and descriptive text guidelines included.
Keyboard interactionsTab and Enter interactions documented.
Design tokensAll visual attributes available as design tokens.
Figma componentComponent set created with State and Disabled variants, bound to semantic tokens.