A hyperlink is a UI element that navigates the user to another location — within the same page, another view inside the product, or an external resource. Navigation = link; action = button.
Use a hyperlink when the interaction:
Do not use links for primary actions, destructive actions, form submission, or state changes.
| Variant | Usage |
|---|---|
| Inline | Inside body text — underlined by default, same font size as body |
| Standalone | Cards, panels, lists — underline optional; clear hover state required |
| Internal | Navigation within the system (→ suffix) |
| External | Leaves the product (↗ suffix) |
Link color must meet WCAG 2.1 AA contrast (≥ 4.5:1), be distinguishable from body text, not rely on color alone, and stay consistent across the system. Users scan for blue, underlined text as a learned convention — if brand color is not blue, underline remains mandatory for inline links.
See the API documentation for integration details.
| Icon | Meaning | Use when |
|---|---|---|
| → | Move within the system | Another page, deeper nav level, settings panel — not for delete, toggle, or modal actions |
| ↗ | Leave the system | External website, system browser, new tab — not for internal routing or nested menus |
In structured menus: underline is not required; hover highlight must indicate interaction; pointer cursor and adequate touch targets on web.
Correct: Download the API documentation (linked phrase only)
Incorrect: Click here to download the API documentation