Link
Inline or standalone text link. Brand for navigation, Neutral for meta links, Danger for destructive links.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="row">
<a class="px-link" href="#">View all projects</a>
<a class="px-link px-link--neutral" href="#">Privacy policy</a>
<a class="px-link px-link--danger" href="#">Delete account</a>
<a class="px-link" href="#">Documentation<svg class="px-icon" aria-hidden="true">…</svg></a>
</div>Usage
- Use links to navigate; use buttons to act.
- Underline appears on hover; inline links in body text should stay underlined.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Sizes
Small, Medium and Large.
<div class="row">
<a class="px-link px-link--sm" href="#">Small link</a>
<a class="px-link" href="#">Medium link</a>
<a class="px-link px-link--lg" href="#">Large link</a>
</div>Disabled
aria-disabled removes it from pointer events.
<a class="px-link" aria-disabled="true">Unavailable link</a>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-link | class | Brand tone. |
px-link--neutral · --danger | class | Tone. |
px-link--sm · --lg | class | Size. |
aria-disabled="true" | attribute | Disabled state. |
Figma properties
Link45 variants · page “Buttons”Open
Inline or standalone text link. Brand for navigation, Neutral for secondary/meta links, Danger for destructive links. Underline appears on hover and press; visited colour is --px-link-content-visited.
| Property | Type | Values |
|---|---|---|
| Label | Text | “Link text” |
| Trailing icon | Boolean | — |
| Trailing icon swap | Instance swap | — |
| Tone | Variant | Brand Neutral Danger |
| Size | Variant | Small Medium Large |
| State | Variant | Active Hover Pressed Focused Disabled |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-link-gap | spacing-xs | 4px |
Accessibility
- Links that open a new tab need text or an icon label that says so.
- Visited color uses --px-link-content-visited.