A link (also known as a hyperlink) is an interactive text element.
Visualization of different link types – live example
When to Use
Don’t use the link:
- To trigger an action. Use a button instead.
- If there is no link target.
A link is an interactive element in text that is indicated by colored text or an underline.
Anatomy of a link
There are three different link variants:
- Default: To display a simple link.
- Emphasized: For very important links that need to attract the user’s attention quickly.
- Subtle: To distinguish between more important (default) and less important (subtle) links when the app page contains a large number of links (10+). Subtle links allow you to improve the visual hierarchy in large lists and tables.
Link variants – live examples
Behavior and Interaction
To trigger the event or navigation, the user clicks the link.
If a link target has a specified URL, it can also be triggered via the context menu.
If the link can’t be triggered, display it in the disabled state. For example, if a content area is disabled, also show the links in this area as disabled.