Guidelines
When to use
- Navigation: Direct users to another page within the application.
- External links: Take users to an entirely different website.
- Anchors: Jump to a specific section within the same page.
- Contact links: Link to emails or phone numbers for quick access.
When not to use
- Triggering actions: If the interaction changes data, modifies a state, or affects the display, use a button instead.
Standalone vs. Inherited
- Standalone: Standalone links should use a text size and style that complements the surrounding content, ensuring they are visually distinct without dominating the rest of the design.
- Inherited: Inherited links match the size and style of the surrounding text, blending seamlessly within a sentence or paragraph.
Standalone links should be clear and visually distinct from regular text.
Inherited links match the color with the text content.
Link vs. Button
As a general rule, use Buttons for actions (e.g., making changes, submitting). and Links when directing the user to a different page.
- Links: Links should be used for navigation, whether within the app or to external websites.
- Buttons: Use buttons for actions that involve changing or adding data, submitting information, or triggering a state change.
Buttons are used to indicate actions.
Don't use Links for actions.
Optional icon
An icon can be used with standalone links, but they should be applied sparingly. They are most useful for indicating external navigation.
Behavior
Interactive behavior within components
To align with our new product vision, the interactive behavior of links nested within other components, such as table rows or cards, can be inverted. By default, these links won’t have underlines, but when hovered over, an underline will appear, and the cursor will change to indicate the element is clickable.
However, accessibility remains a top priority. It’s important to ensure clear visual affordances for users, so prioritize keeping links underlined whenever possible.
Hover state
All links must have distinct hover and visited states to provide a clear interactive indicator. The link’s appearance should change (such as underlining and color shifts) on hover, signaling its interactivity to the user. These states help guide user interaction and enhance accessibility.
Content
Write links with as much context as possible so that users know where they will go after selecting them. Avoid generic naming like “Learn more” when possible. Instead, directly tell the user where they will go once they interact with the link. Links should not exceed one line in length and be applied to 2-4 keywords rather than a full sentence or line.
Tone
Links should remain neutral, but use actionable language to direct the user.
Do
- Keep sentence case in mind when writing link text.
- Incorporate the link text into the sentence when possible.
- Explain to the user in the link text where it leads.
Do not
- Add punctuation at the end of links if the link is at the end of a sentence.
Accessibility
Link focus
- Do not set your site's link focus to outline: none. Never. Ever.
- If you have multiple form fields on your site or you see the dreaded outline: none in your base code, you can reset the browser defaults by adding the code:
a:focus {
outline: auto 2px Highlight; // for non-webkit browsers
outline: auto 5px -webkit-focus-ring-color; // for webkit browsers
}
- Of course you can create your own focus styles to match your theme or to make the default browser styles more prominent, just make sure they are visible by tabbing and obvious to your users.