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 and Adaptiveness

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).
Link – Wrapping and truncation
Link – Wrapping and truncation
Link – Wrapping and truncation (hover)
Link – Wrapping and truncation (hover)

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

When the mouse pointer is positioned over a link, the user gets additional visual feedback (underlining) to emphasize that the text is a clickable link.

Hovering over the link with the mouse
Hovering over the link with the mouse

Disabled State

A link can have a disabled state to indicate that it is currently not clickable. Only disable a link if the user has other options for accessing the function behind the deactivated link.

Disabled links
Disabled links

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).

Links shown in different styles
Links shown in different styles
Links shown in different styles when hovering
Links shown in different styles when hovering

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.

Elements and Controls

Implementation