Text link
Text links are lightweight navigational elements. Links can appear within a paragraph, after a paragraph, standalone, or in a list of other links. They are underlined by default.
Clear
The link text makes it clear where it will take the user.
Identifiable
Links are familiar and easily identifiable amongst other content.
Concise
Link text is short. Aim for fewer than 5 words.
When to use
- Navigating within the app
- Navigating externally
- Navigating to an element on a page (anchor link)
- Email addresses and phone numbers
When not to use
- Actions that manipulate data or how its displayed
- Actions that change state
- Text
- Underline
Inline
Inline links appear within paragraphs and sentences. They always have an underline to differentiate between non-link content.
Color
Links should generally match the color of the content around it. Standalone links can use a secondary color within a list to avoid overwhelming the UI or a primary color for more emphasis.
Size
Text links inherit their size and styling from the content around them.
State
Text links use state layers for interaction states. The available states are enabled, hover, focused, visited, and disabled. Learn more about the state layer color values in Color tokens.
Native
Keep in mind that on native devices, it's common for an entire line of text to be tappable when it contains a link. This is particularly important if multiple links are close together, as it could lead to accidental taps.
