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. Inline
- Standalone: Standalone links are those used on their own. They should be used with the underline property unless they are a child of another interactive element. In that situation, they should get underlined when hovering over the parent component. Their text size and style should complement the surrounding content, ensuring they are visually distinct without dominating the rest of the design.
- Inline: Inline links are those used within a paragraph of text. They should always use the underline property to be distinguished visually from he surrounding text. They will inherit the text size and width from the parent.
Standalone Links should be used with the underline property unless they are a child of another interactive element.
Always use Inline Links with the underline property.
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
Use clear, descriptive link text
The link should tell users what they’ll get if they click. Avoid vague phrases.
✅ View invoice details
🚫 Click here / Learn more
✅ Learn more about tax settings
🚫 More info
✅ What’s included in the invoice?
🚫 Click for details
If within a sentence, make it a natural part of the phrase
Never use “
✅ You can view your invoices in Account settings.
✅ Payment failed. You can change your payment method or try again.
🚫 View all your invoices here.
Use sentence case (unless referring to titles or proper nouns)
If you are linking to a document, page, or UI element, match the capitalization of that thing.
✅ Manage booking
✅ Go to Billing
✅ View scheduled exports
🚫 Manage Booking
Avoid using full URLs as link text
✅ Visit our help center
🚫 https://support.example.com
Be concise
Link text should be as short as possible while still being clear — usually 1–5 words.