The Link component is an interactive element that enables navigation to another page, resource, or section when activated, typically rendered as underlined text.
- Use links for navigation within or across pages, such as jumping to related content, external sites, or in-app routes (e.g., in menus, cards, or body text).
- Ideal for inline text where seamless integration maintains reading flow; also for standalone calls-to-action that imply movement.
- Benefits: Provides clear affordance for exploration without disrupting the current task.
- For actions that modify state without navigation, such as submitting forms, toggling visibility, or deleting items; use Button instead to avoid unexpected page loads.
- In place of buttons for primary actions; links should not mimic button styling to prevent confusion.
- For disabled navigation; hide or remove the link rather than disabling it, as disabled links can frustrate users and complicate accessibility.
- On non-interactive text; avoid link styles (e.g., underlining and/or coloring) on text that isn’t clickable.
| Variant | Use Case |
|---|
| Inline | Embedded in paragraphs or sentences for contextual navigation. |
| Standalone | Isolated links for prominent calls-to-action. |
| With Icon | Paired with an icon for visual emphasis (e.g., external link indicator). |
| Element | Description |
|---|
| Text | The visible, clickable label describing the destination. |
| Icon | Optional visual indicator (e.g., arrow for external links). |
| State | Description | Visual Indicators |
|---|
| Default | Default interactive state | Underlined text in link color. |
| Hover | Cursor over object | Color shift, add/remove underline depending on default style. |
| Focus | Keyboard focus (visible on Tab or arrow key navigation) | High-contrast outline. |
| Visited | Link has been navigated to previously. | Subdued color (e.g., purple). |
- Use concise, action-oriented text that clearly indicates the destination or outcome (e.g., “View details” instead of “Click here”).
- Avoid generic phrases; prioritize specificity for trust and accessibility (e.g., “Download report” not “More”).
- Tone: Neutral and informative; ensure text stands alone without surrounding context for screen readers.
- Use semantic
<a> element with valid href for built-in navigation and focusability.
- Provide
aria-label if text alone is insufficient (e.g., for icon-only links).
- Ensure sufficient color contrast (at least 4.5:1) for text and underline against background.
- Visible focus indicator (e.g., outline) must not be removed.
- For external links, add
target="_blank" with rel="noopener noreferrer" and announce via ARIA (e.g., “opens in new tab”).
Support standard keyboard navigation
- Tab/Shift+Tab: Focus the link.
- Enter/Space: Activate the link.
