Intro

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

Different links visualizing the various link types
Different links visualizing the various link types

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.

Wrapped (first) and truncated (second) link
Wrapped (first) and truncated (second) link

Types

There are four different link types:

  • Default
  • Emphasized
  • Subtle
  • Link with icon
Guidelines
Use a meaningful link text that indicates what will happen when the user interacts with the link (for example, Open Sales Order). Avoid texts such as Click Here or Link, as these do not meet accessibility standards.
Default, emphasized, subtle link, and link with icon
Default, emphasized, subtle link, and link with icon

Default

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

Default links
Default links

Emphasized

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

Emphasized links
Emphasized links

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.

Subtle links
Subtle links

Link with Icon

Use the link with icon when the user expects and profits from the icon in the UI context.

Guidelines
Use the link with icon only if the icon is internationally well-known and easily understood. For example,  (world),   (calendar), or (theater).
Links with icon
Links with icon

Behavior and Interaction

To trigger the event or navigation, the user clicks the link. It provides visual feedback for “hover” and “focused” states.

If the link cannot be triggered due to, for example, a disabled content area part, display the disabled state.

Default, hover, focused, and disabled link
Default, hover, focused, and disabled link

Resources

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

Elements and Controls

Implementation