Link
Links navigate users to a new page or section. Use the variant that communicates the visual weight of the navigation action.
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> with full native link semantics. When href is omitted the component renders as a non-interactive <span>.
| 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). |
rel | noopener noreferrer | Auto-applied when target="_blank" to prevent opener attacks. |
Icon-only links
When using hide-label, always supply the label prop so screen readers can announce 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.
1.4.1 Use of Colour — APass
Colour is not the sole means of conveying link state — an underline is added on hover to provide a non-colour cue.
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 tokenized focus ring is applied on keyboard navigation using :focus-visible styles.
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>. - Icon-only links — always provide the
labelprop when usinghide-label. The visible label is hidden but still announced by screen readers as the accessible name.