Link Pure
A minimal text+icon navigation link with no background or border. Use for inline navigation actions where a full-weight link would be too visually heavy.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Move focus to the next focusable element. |
| Shift + Tab | Move focus to the previous focusable element. |
| Enter | Activate the link and navigate to the target URL. |
Screen reader behaviour
When href is provided, the inner element renders as a native <a>. When href is omitted, a non-interactive <span> renders instead.
| Property | Value | Note |
|---|---|---|
role | link (implicit) | Inherited from the native <a> element. |
aria-label | From label prop | Required when hideLabel is true (icon-only mode). |
aria-current | "page" when active | Automatically set when the active prop is true. |
rel | noopener noreferrer | Auto-applied when target="_blank" to prevent opener attacks. |
Icon-only mode
When hideLabel is true, the label text is visually hidden but remains in the DOM for screen readers. Always pair with the label prop to ensure a meaningful accessible name.
WCAG 2.2 compliance
1.4.3 Contrast (Minimum) — AAPass
Link foreground colour meets the 4.5:1 minimum contrast ratio against the page background in both themes.
2.4.4 Link Purpose (In Context) — AAPass
Link purpose is determinable from the visible label text or the aria-label prop for icon-only mode.
2.4.7 Focus Visible — AAPass
A visible focus ring is applied on keyboard navigation using :focus-visible styles.
4.1.3 Status Messages — AAPass
aria-current="page" communicates active navigation state to assistive technologies without visual-only cues.
3.2.3 AAA — Reduced MotionPass
Transition animations inside Shadow DOM respect prefers-reduced-motion.
Best practices
- Reduced motion — all CSS transitions inside the shadow DOM respond to
prefers-reduced-motion: reduceand are suppressed automatically. - Focus management — the component uses
delegatesFocus: true. Calling.focus()on the host element correctly forwards focus to the inner<a>. - Active state — always reflect route state using the
activeprop so screen readers receivearia-current="page"on the current navigation link.