UI5 Web Components
Search

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
accessibilityAttributes
object
An object of strings that defines several additional accessibility attribute values for customization depending on the use case. It supports the following fields:
  • expanded: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
    • true
    • false
  • hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values:
    • Dialog
    • Grid
    • ListBox
    • Menu
    • Tree
since v1.1.0
accessibleName
accessible-name
string
""
Defines the accessible ARIA name of the component.
since v1.2.0
accessibleNameRef
accessible-name-ref
string
""
Receives id(or many ids) of the elements that label the input
since v1.0.0-rc.15
accessibleRole
accessible-role
string
"link"
Defines the ARIA role of the component. Note: Use the "button" role in cases when navigation is not expected to occur and the href property is not defined.
since v1.9.0
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.
altKey
type: Boolean
description: Returns whether the "ALT" key was pressed when the event was triggered.
ctrlKey
type: Boolean
description: Returns whether the "CTRL" key was pressed when the event was triggered.
metaKey
type: Boolean
description: Returns whether the "META" key was pressed when the event was triggered.
shiftKey
type: Boolean
description: Returns whether the "SHIFT" key was pressed when the event was triggered.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel