Do use words that describe where the link leads and what content is expected.
Link button
v3.1.0
Link buttons behave similar to text links. They are primarily used for navigation and triggers, using an underline as affordance.
- Skin
- CoreUI
- React
Clear
The text makes it clear where this action will take the user.
Identifiable
Links are familiar and easily identifiable amongst other content.
Concise
Link text should be short. It’s best to aim for fewer than 5 words.
When to use
- Navigating between pages or editing states
- Actions that follow a short description of contents
When not to use
- Actions that manipulate data or how its displayed
- Actions that change state
- Title
- Underline
Strong
Strong buttons are primary actions to take in an application. This can sit inline with content or standalone.
Subtle
Subtle links are still a primary action, it’s recommended to use this to align with the foreground color of secondary text.
White
White is used within components that utilize a colored background like alert notices. This particular example uses the foreground onSuccess color token. Learn more about these token values in Color tokens.
Branded
Branded link buttons use the same foreground color as text within banners and other branded experiences.
Size
There are three sizes for links according to the size of the content around it. This is generally Subtitle 2 (16/24), Body (14/20), and Caption (12/16). Standalone links can use whichever size is most appropriate for their context. Learn more about type sizes in Typography tokens.
Underline
Standalone link buttons are placed on their own line close to the relevant content and contain an underline by default.
No underline
The underline can be omitted if the context is clear, such as in navigational lists.
Non-underlined links are less accessible so avoid using them for critical or important links. When in doubt, use an underline.
States
States are used to indicate levels of interaction when hovering a link button. The available states are enabled, hover, focused, and disabled. They follow the same patterns as Text Links. Learn more about the state layer color values in Color tokens.
Content
Don’t use lengthy words that create longer strings. They add unnecessary detail.
Underline
Do always use an underline with standalone link buttons.
Don’t remove the underline for links near other content. This can easily get lost and are inaccessible to low-sight users.
Do consider removing the underline in a large list of link buttons, such as in footer and other navigational lists.
Don’t add the underline on large lists of link buttons. This adds visual complexity when the context is already clear.
Titles
Do use links in body copy or footnotes.
Don’t use links for titles or headlines.
Large
Large standalone links are Subtitle 2 (16/24) type size in regular weight.
Medium
Medium standalone links are Body (14/20) type size in regular weight.
Small
Small standalone links are Caption (12/16) type size in regular weight.