Link

@ui5/webcomponents
<ui5-link>

Different Link Designs

Standard Link Subtle link Disabled Emphasized
<ui5-link href="https://www.sap.com" target="_blank">Standard Link</ui5-link>
<ui5-link href="https://www.sap.com" target="_blank" design="Subtle">Subtle link</ui5-link>
<ui5-link href="https://www.sap.com" target="_blank" disabled>Disabled</ui5-link>
<ui5-link href="https://www.sap.com" target="_blank" design="Emphasized">Emphasized</ui5-link>
	

Overview

The ui5-link is a hyperlink component that is used to navigate to other apps and web pages, or to trigger actions. It is a clickable text element, visualized in such a way that it stands out from the standard text. On hover, it changes its style to an underlined text to provide additional feedback to the user.

Usage

You can set the ui5-link to be enabled or disabled.

To create a visual hierarchy in large lists of links, you can set the less important links as Subtle or the more important ones as Emphasized, by using the design property.

If the href property is set, the link behaves as the basic HTML anchor tag () and opens the specified URL in the given target frame (target property). To specify where the linked content is opened, you can use the target property.

Responsive behavior

If there is not enough space, the text of the ui5-link becomes truncated. If the wrap property is set to true, the text is displayed on several lines instead of being truncated.

ES6 Module Import

import "@ui5/webcomponents/dist/Link";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
design
LinkDesign
"Default"
Defines the ui5-link design.

Note: Avaialble options are Default, Subtle, and Emphasized.
disabled
boolean
false
Defines whether the ui5-link is disabled.

Note: When disabled, the ui5-link cannot be triggered by the user.
href
string
""
Defines the ui5-link href.

Note: Standard hyperlink behavior is supported.
target
string
""
Defines the ui5-link target.

Notes:
  • Available options are the standard values: _self, _top, _blank, _parent, and _search.
  • This property must only be used when the href property is set.
wrap
boolean
false
Defines whether the ui5-link text should wrap when there is no sufficient space.

Note: The text is truncated by default.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
Node [0..n]
Defines the text of the ui5-link.
Note: –źlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
click
Fired when the ui5-link is triggered either with a mouse/tap or by using the Enter key.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel