Updated: July 16, 2024

Link

ui5-link | v1.0

Intro

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

Visualization of different link types – live example

When to Use

Do

Use the link:

  • To navigate to another page.
  • To trigger an event.
Don't

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
Anatomy of a link
Anatomy of a link

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

Components

Implementation

Link
(UI5 Web Components documentation)