Link
Create navigation and anchor elements.
Links help you set up navigation within your app and connect it to external resources, trigger emails, phone numbers, and scroll to select. They come in three types: primary, contextual, and quiet.
To trigger actions and change data or state, consider using a Button.
This is not a standalone component. Please use these guidelines to implement it according to the WPP Design System.
Usage
Primary
Use as the default link for generic purposes.
Contextual
Use as a more subtle alternative for inline links.
Quiet
Use in tables and cases when the primary and contextual links look too busy. Keep in mind that quiet links can be perceived as plain text and tend to be less accessible.
Accessibility
Keyboard focus
- The keyboard focus state replicates the link's visual hover state and adds a 2px focus ring.
- For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
- Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.
Keyboard interactions
See the ARIA Authoring Practices Guide: Link Pattern for guidance on expected keyboard interactions, including roles, states, and properties.
Resources
Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.