- Use standalone links to allow users to navigate to different pages within your product.
- Use standalone links to allow users to navigate to an entirely different website.
- Use standalone links as means to jump between sections of a page.
Link
A link is an interactive element in a user interface that allows users to navigate to another resource or location, typically on the web.
Overview
The purpose of links is to provide a visual and interactive way for users to explore and navigate through an interface. By clicking or tapping on a link, users can quickly access additional information or move to a different location, enhancing their browsing experience and enabling efficient interaction.
Links are often used to connect various pages, sections, or external resources, creating navigation menus and directing users to related content. They also enable interactions like opening new tabs or windows.
Dos and Don’ts
- Don't use the reversed styling when surrounded by regular text, as it will get lost.
Anatomy
- Label: Text label informing the user about the nature of the link.
- Icon (Optional): Leading or trailing icon.
Variations
Default
Should be used as the default colour for all our links.
High visibility
Uses a blue colour to increase the visibility of the link.
Inverse
It should be used in areas where an inversed background is used, or when contrast between the default or high visibility links isn’t sufficient to pass accessibility rules.
Modifiers
Emphasis
Links can be de-emphasised by using their non-bold variant. When doing that, make sure these can still be identified as links. You can achieve that by:
- Adding a leading or trailing icon.
- Using the high visibility variant of the link.
- Using the default underline variant of the link.
Styling
The underline in standalone links can be removed to achieve a more minimal look. This variant can be used when the link is repeated in a list or navigation. However, whenever you do that you’ll need to make sure they can still be identified as a link by ensuring it has enough emphasis.
Icon
You can use icons to reinforce the action that will take place when the user interacts with a standalone link. On the high visibility variant of the link the icon needs to use the same colour as the link.
Sizes
Behaviours
Links that act as buttons
This is available when a link needs to be used as a call to action that triggers an action for the users.
Use these with caution - dictation software users may not be able to properly identify these actions, since they are semantically buttons, even though they may look like links.
Content
-
Be mindful of which words in a paragraph you use for your links. Make sure the words you convert into links are directly related to the content that the link will lead you to.
-
Use sentence-style capitalisation (only the first word in a phrase and any proper nouns capitalised).
Using inline links
Dos and Don’ts
- Use inline links to allow users to navigate to different pages within your product.
- Use inline links to allow users to navigate to an entirely different website.
- Use inline links as means to jump between sections of a page.
- Use inline links to present phone numbers or email addresses.
- Don’t use inline links as calls to action. Use buttons instead.
- Don’t use inline links for actions that will change elements in a screen. Use buttons instead.
- Don’t use an icon with inline links. Use standalone links instead.
Interactive states
Outlines the atomic level interactive elements for the component.
Examples
Outlines the atomic level interactive elements for the component.
LTR examples
Here are some examples of links in left-to-right context:
RTL examples
Here are some examples of links in right-to-left context:
Resources
| Stable | |
| Stable | |
| Beta | |
| Stable | |
| Stable | |
 iOS JustUI [UI Kit] | Stable |
 iOS PIE [SwiftUI] | Stable |
 Android PIE [Compose & Views] | TBC |
