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

Component availability

This component is available in the following libraries:

When to Use

Anatomy

Types

Link types

A. Default link: A standard link style. Use it for regular navigation.

B. Emphasized link: A link style with increased visual emphasis. Use it when a link needs stronger visual prominence than default links.

C. Subtle link: A link style with reduced visual emphasis. Use it only in tables to distinguish secondary links in dense data lists. Do not use subtle links outside tables.

Link types

Link with icon

Use a link with an icon when the icon helps clarify the link’s purpose and destination, such as a file type (PDF, spreadsheet) or an object type (user, order, attachment).

Link with icons on the leading and trailing sides

States

Component states

The link component has two states: enabled and disabled.

A. Enabled state: The link is interactive.
B. Disabled state: The link is not interactive.

Link component states: enabled (A) and disabled (B)

For more information, see Component States.

Interaction states

The link component has four interaction states: regular, hover, visited, and down.

A. Regular state: Displays the default interaction state of the component.
B. Hover state: Displays the hover state when the cursor is over an enabled link.
C. Visited state: Displays the visited state after the link has been clicked.
D. Down state: Displays the pressed state while the link is pressed.

Link interaction states: regular (A), hover (B), visited (C), and down (D)

For more information, see Interaction States.

Focus states

The focus state indicates which component is currently focused and ready for keyboard interaction.

A. Unfocused state: Displays the unfocused state with no extra highlight.
B. Focused state: Displays the focused state with a visible highlight.

Link focus states: unfocused (A) and focused (B)

For more information, see Focus States.

Empty state :badge, info, large, _, SAPUI5 only:

The empty state indicator uses an en dash (–) line. It is displayed when the link component has no text.

Regular link (A) and empty state of a link (B)

Behavior and Interaction

Mouse interaction

The link appears in its default style when presented (A). When the cursor moves over it, the link provides visual feedback, typically by adding an underline, to indicate that it is interactive (B). When the user clicks the link, it momentarily displays a pressed state to confirm the interaction (C). After the click, the link retains a visible focus indicator (D). This helps maintain orientation, supports keyboard accessibility, and aligns with standard interaction patterns across the system.

Mouse interaction

Canceling link activation

You can cancel the activation of the link before releasing the mouse button during the activation process.

The link appears in its default style when presented (A). As the cursor moves over it, the link offers immediate visual feedback, typically by adding an underline, to indicate that it is interactive (B). If the user presses the mouse button while over the link but then drags the pointer outside the link’s active area before releasing, the link’s activation is canceled (C). In this scenario, the link does not navigate or trigger any action. However, after the mouse button is released, even outside the link boundaries, the link retains a visible focus indicator to reflect the recent interaction (D).

Canceling link activation

Activating a link via context menu

The link appears in its default style when presented (A). As the user moves the cursor over it, the link provides visual feedback to indicate that it is interactive (B). When the user right-clicks the link, it briefly acknowledges the interaction before the context menu opens near the pointer (C). As the user moves through the menu, each item highlights to signal that it is selectable (D). Selecting a menu item triggers the corresponding action, for example, opening the link in a new tab or performing another browser-supported operation. This interaction follows standard platform conventions and does not interrupt the primary workflow.

Triggering a link via context menu

Touch interaction

Tapping the link initiates the interaction. Since hover states are unavailable on touch devices, a single-finger tap gesture is used to initiate the link interaction.

For more information, see Tap (press and release).

Tooltips

Provide a tooltip when the link text is truncated, for text-only links and links with icons.

Link with truncated text and a tooltip

For more information, see Using Tooltips.

Responsiveness

The link does not change size according to the cozy or compact mode.

Link in compact and cozy mode

For more information, see Content Density.

Accessibility

SAP follows international standards, such as WCAG and WAI-ARIA, and strives to make our business solutions accessible and inclusive.

For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.

Keyboard navigation

The following keyboard combinations are supported by the SAPUI5 Link component.

Screen reader support

For additional details on screen reader support and Accessible Rich Internet Applications (ARIA), see the UI5 Screen Reader Support and WAI-ARIA Authoring.

Content

Localization

The link component supports both left-to-right (LTR) and right-to-left (RTL) reading directions.

Wrapping and Truncation

The link component supports wrapping and truncation.

A. Wrapping: 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. This is the default behavior of the component.

B. Truncation: Avoid truncation. If you truncate the link text, provide the full text in a tooltip.

Wrapped (A) and truncated (B) link

For more information, see Wrapping and Truncation.

Features

Opening a popover and a context menu

A link can be configured to open a popover when clicked, revealing additional content or options without navigating away from the current view. Alternatively, users can right-click the link to access a context menu, which provides additional actions based on standard browser behavior.

Link opening a popover (A) or a context menu (B)

Target options

The link supports different target options that define where the linked content opens.

The following target options are available: The link can open the linked document in a new browser window or tab (blank), in the parent frame if applicable (parent), in the same frame as the current page (self), or in the full browser window, replacing any existing frames (top).

Demonstrating interaction with target destination

Framework Comparison Overview

Some behaviors differ between frameworks due to implementation specifics. The table below summarizes the differences between SAPUI5 and SAP Web Components and lists the framework-specific patterns.

Related Links