Links
Overview
Links are used to navigate users to related content, secondary resources, or downloads. They support the main page content and are typically embedded within text or presented as low-emphasis actions.
Links should not compete with primary actions. When an interaction represents a significant action or workflow step, use Buttons or Action Links instead.
Guidelines
Dos
- Use text links for supplementary or complementary actions.
- Use links to navigate to related information or secondary resources.
- Embed links within complete sentences or longer passages of text.
- Keep link text concise and descriptive (no more than 4 words).
- Always underline text links to clearly indicate clickability.
- Use links for navigation or file downloads only.
Don'ts
- Don’t use links for primary or high-emphasis actions (e.g., Save, Submit, Next).
- Don’t use links outside of contextual text unless explicitly designed as stand-alone text (e.g., table rows).
- Don’t exceed four words in link text.
- Don’t rely on color alone to indicate a link—underlines are required.
- Don’t use links when a non-text element needs to behave like a button.
Variants
| Variant | Description | Example Use |
|---|---|---|
| Text Link | Inline or stand-alone text that navigates to another page or downloads a file | Help articles, related resources, documentation |
| Action Link | Low-emphasis action used within UI components | Table row actions, toolbar actions, panel actions |
Icon-only
Use the link-icon-only class when needing to display only an icon for the link. This should only be used within repeated content, such as lists or tables, to minimize repetitive text. Use of hidden screen-reader text should be used to describe the link for accessibility.
Related components
Buttons — High-emphasis actions.
Action Links — Context-specific actions.
Icons — Available icons.