Link
FreeStyled hyperlink for navigation between pages or sections. 4 variants covering standard, muted, brand-coloured, and danger-styled links. Always uses the native <a> element for correct semantics and accessibility.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Brand-coloured link with underline on hover. The standard link style. | Use for inline navigation links within body text or standalone calls-to-action. |
| Muted | Subtle grey link that blends with surrounding text. | Use for secondary links like "Terms" or "Privacy" in footers and fine print. |
| Accent | High-contrast brand-colour link for emphasis. | Use when the link itself is the primary call to action — "View all", "Get started". |
| Danger | Red-toned link for destructive navigation — "Delete account", "Unsubscribe". | Use for links that lead to destructive or irreversible outcomes. |
Usage Guidelines
Do
Use descriptive link text — "Read the documentation" not "Click here".
Don't
Style buttons as links or links as buttons — they have different semantics.
Do
Underline on hover for discoverability.
Don't
Open same-site links in new tabs — it breaks the back button.
Do
Use the External variant (with arrow icon) for links opening in a new tab.
Don't
Use vague text like "Learn more" or "Click here" without context.
Code
HTML
<a href="/docs" class="lex-link lex-link--default">
Read the documentation
</a>
<a href="/terms" class="lex-link lex-link--muted">
Terms of service
</a>
<a href="https://external.com" class="lex-link lex-link--default"
target="_blank" rel="noopener noreferrer">
Visit external site ↗
</a>CSS Custom Properties
.lex-link {
color: var(--lex-link-color);
text-decoration: none;
text-underline-offset: var(--lex-link-underline-offset, 3px);
font-weight: var(--lex-link-font-weight, inherit);
transition: color 150ms ease;
}
.lex-link:hover {
color: var(--lex-link-hover-color);
text-decoration: underline;
}
.lex-link--muted {
color: var(--lex-text-muted);
}React
// Using Lexicon CSS classes with React
export function DocLink() {
return (
<Link href="/docs" variant="default">
Read the documentation
</Link>
);
}Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-link-color | — | — | color |
| --lex-link-hover-color | — | — | color |
| --lex-link-underline-offset | — | — | offset |
| --lex-link-font-weight | — | — | weight |
Accessibility
- Use native <a> element with href — links must be distinguishable from text.
- Visited state should be visually distinct to show navigation history.
- Avoid "click here" — use descriptive link text that makes sense out of context.
- External links should indicate they open a new window via aria or visible indicator.