A link (also known as a hyperlink) is an interactive text element.

Visualization of different link types – live example

When to Use

Use the link:

• To navigate to another page.
• To trigger an event.

Don’t use the link:

• To trigger an action. Use a button instead.
• If there is no link target.

Anatomy

A link is an interactive element in text that is indicated by colored text or an underline.

1. Text
2. Underline

Variants

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.

A default link and a disabled link – live examples

Related Links