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

Usage

Use a link if:

• You want to navigate to another page.
• You want to trigger an event.
• You want to point to an object or person. If so, you can either navigate to the object’s/person’s details or display them in a quick view after the link is triggered.

Do not use a link if:

• You could use a button to trigger the action instead.
• The link text is the key identifier of an object. In this case, use an actionable object identifier instead.
• There is no target or reference to be linked to.

Responsiveness

The link can either truncate or wrap. Favor wrapping over truncating and keep the link text as short and meaningful as possible.

For more information and guidelines on the responsive behavior of text, see Wrapping and Truncating Text.

Types

There are four different link types:

• Default
• Emphasized
• Subtle
• Link with icon

Default

Use a default link if you want to display a simple link.

Emphasized

Use an emphasized link for extraordinarily important links that need to attract the user’s attention quickly.

Subtle

Use subtle links to distinguish between important (default) and less important (subtle) links when the app page is full of various links (10+). Subtle links allow you to improve the visual hierarchy in large data lists and tables.

Link with Icon

Use the link with an icon when the user expects and profits from the icon in the UI context. Please note that the icon is supportive, which means that it supports the text next to it. Therefore, a tooltip is not required. Do not use the icon for additional information.

Behavior and Interaction

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.