Components
Link
- Overview
Overview
When to use
A link <a> element is used when you want users to:
- Navigate to a different page within the site
- Navigate to an entirely different site
- Jump to an element on the same page
- Link to emails or phone numbers
When not to use
If you are performing an action, like submitting a form, use a button element instead.
Variants
Inline
Inline links are used in sentences or paragraphs of text. The inline link behaves the same as the standalone link but it is styled with an underline.
Neutral color can be used for less important actions. Bold text can be used for emphasis.
Standalone
Standalone links are used on their own or directly after the content. They should not be used within sentences or paragraphs.
They also have a neutral color option. Bold text can be used for emphasis.
The standalone link component can be paired with an icon. Icons should always be the same color as the link text.
Color
Neutral
Call to action
A link can be styled as a button when more prominence is required. Try to use only one per section or screen.
Size
Inline link sizes should match the type size of the text it is inline with. CTA and standalone links have regular and compact size option.
Inline
Standalone
CTAs
Internal vs external links
Internal links point to the currently active website. External links navigate to an entirely different site and should always use the outbound link icon.