Intro

A link (also known as hyperlink) is a clickable text element. The link control is used for navigation, but can also trigger an event. Links are visualized to stand out from standard, non-clickable text.

Usage

Use a link if:

• The control you are using does not support other navigation options.
• You want to reference an object (for example, from a form or table).
  Note: Use the quick view control to show the object details (sap.m.QuickView).

Do not use a link if:

• The link text is the key identifier of an object. In this case, use an actionable object identifier instead.
• You could use a button to trigger the action instead. If you want the button to look like a link, you can use a transparent button.

Responsiveness

A link can react to insufficient room in two different ways:

• By default, the text is truncated to fit the available screen real estate.
• If you enable wrapping, the link uses more lines instead of truncating the text (property: wrapping).

Behavior and Interaction

Triggering an Event

The purpose of a link is to trigger navigation or an event. The action is triggered when the user clicks or taps the link. For navigation links, you can specify a target to define where the linked content should open (property: target).

Hovering

Disabled State

Styles

Besides the standard link visualization, there are two more styles: subtle and emphasized.

Subtle

You can use subtle links to distinguish between important and less important (subtle) links (property: subtle). This allows you to improve the visual hierarchy in large data lists.

Do not use subtle links for any other use cases.

Emphasized

If the standard link visualization is not sufficient to attract the user’s attention, you can highlight the link (property: emphasized).

Guidelines

Use a meaningful link text that indicates what will happen when the user clicks the link (for example, Open Sales Order). Avoid texts such as Click Here or Link, as these do not meet accessibility standards.

Resources

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