Component
Links are a text-based navigational element that guides users to other internal or external pages and resources.
Anatomy
There are two main states: default and hover. Hover will have a slightly darker colour to underline the link text to indicate interaction.
Links have the option of a leading or trailing icon but should not contain both simultaneously, nor should styles be mixed (i.e., do not use one trailing and one leading for separate links next to each other).
Guidelines
When not to use
Do not use links…
- when an actionable request is required. Instead, use the Button component.
Best practice
Use links to navigate users to relevant information.
Use links at actionable requests. Use buttons in this instance.
Use helpful language that is relevant to the users journey.
Avoid using simple, non-contextual language that confuses a user.
Be consistent when using standalone links with icons, especially when navigating the user away from the platform.
Avoid mixing icon placement when stacking multiple standalone links. In this case, opt not to use an icon.