Overview
Key features
- Emphasis Levels: Available in high and low emphasis
- Icons: Supports both leading and trailing icons
Anatomy
- Leading Icon: Optional icon placed before the label to visually reinforce link’s purpose.
- Label: Describes the destination or target of the link.
- Trailing Icon: Optional icon after the label to suggest direction or outcome.
Look and feel
States & Emphasis
States define how the component behaves and appears in different interactions:
- Default: The standard appearance when inactive
- Hover: Highlights the field when the user hovers over it
- Visited: Indicates the link has been accessed.
- Focus: Indicates active input with a visible focus indicator.
- Disabled: Prevents interaction and input, appearing visually subdued.
Two emphasis levels are supported – high and low – to adapt visual hierarchy based on context
Best Practice
- Use links strictly for navigation, not for triggering actions
- Keep labels clear, concise, and descriptive of the destination
- Use icons to reinforce meaning or indicate direction
- Don’t use links to perform non-navigational tasks - use buttons instead
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.