Link

Updated 2026-05-14

Confidence anatomy medium variants high motion high a11y high content high

Overview

A Link visually represents clickable text or elements that navigate users to other pages, sections, or resources. It appears colored to indicate interactivity and follows accessibility and design standards for clarity and usability.

Used for navigation to a different page, an external URL, or to trigger a secondary action within a sentence. Not to be used for primary form submissions.

Anatomy

1
Container
the interactive surface — receives focus, hover, press states
2
Label
action verb in title case; the primary affordance signal
3
Leading icon (optional)
reinforces the label; decorative when paired with text
4
Trailing icon (optional)
chevron or external-link glyph for navigation hints
5
Loading indicator (optional)
replaces label when action is in-flight

Variants

State
`Disabled`
`Pressed`
`Focused`
`Hovered`
`Enabled`

Motion

State Transitions

Slug: state-transitions

hover/focus/active transitions stay within the 100-200ms band