Intro

A link (also known as a hyperlink) is an interactive text element. It is typically used for navigation, allowing users to move between different pages or sections of an application.

Link

When to Use

Do

Use the link:

  • To navigate to another page.
  • To jump to an anchor.
  • To open an external URL.
  • To link to a specific object.

Don't

Don’t use the link:

  • To trigger actions. Use the button.
  • If the link text is the key identifier of an object. In this case, use an actionable object identifier instead.
  • If there is no target or reference to be linked to.
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.

Anatomy

A link is a clickable text element, typically shown in a different color and with an underline.

  1. Icon (optional)
  2. Text (in blue color)
  3. Underline

Anatomy of a link

Types

There are four different link types:

Link types

A. Default: Displays a clickable text link with standard styling.

B. Emphasized: For links that require higher visibility text is bolded.

C. 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 lists and tables.

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

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.

Behavior and Interaction

Links let users access objects or navigate. They offer visual feedback for the hover and focused states.

If a link is unavailable, display the disabled state - for example, when part of the content area is disabled.

Link states

A. Regular state: The default link appearance in its normal state - without hover or focus, and without an underline.

B. Hover state: The link appears underlined on hover to indicate that it’s interactive.

C. Visited state: The link retains its regular appearance after being visited. No visual change is applied in the visited state.

D. Down state: The link retains its regular appearance when pressed. No visual change is applied in its down state.

E. Disabled state: The link appears faded and is not interactive when disabled, indicating that it cannot be selected or triggered.

Responsiveness

A link can wrap or truncate, depending on the layout. Favor wrapping over truncating and keep the link text short and meaningful.

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

The link text automatically wraps to the next line when there isn’t enough horizontal space, so the full content remains visible on all screen sizes.

Wrapped link

The link text is truncated and ends with an ellipsis when space is limited, to maintain layout consistency in narrow containers.

Truncated link

Localization

For right-to-left languages, such as Arabic or Hebrew, the link is mirrored.

Accessibility

To conform with the international Web Content Accessibility Guidelines WCAG 2.2, set the line height for links as follows:

Elements and Controls

Implementation

Visual Design

  • Link (visual design specification)
  • Button (visual design specification)

Elements and Controls

Implementation