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 HTML anchor tag (<a><a/>) 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 wrappingType property is set to "Normal", 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
accessibleNameRef
accessible-name-ref
String
""
Receives id(or many ids) of the elements that label the input
since v1.0.0-rc.15
design
LinkDesign
"Default"
Defines the component design.

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

Note: When disabled, the click event cannot be triggered by the user.
href
string
""
Defines the component href.

Note: Standard hyperlink behavior is supported.
target
string
""
Defines the component target.

Notes:
  • _self
  • _top
  • _blank
  • _parent
  • _search
This property must only be used when the href property is set.
wrappingType
wrapping-type
WrappingType
"None"
Defines how the text of a component will be displayed when there is not enough space. Available options are:
  • None - The text will be truncated with an ellipsis.
  • Normal - The text will wrap. The words will not be broken based on hyphenation.

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 component.
Note: Although 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 component 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 Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel