Skip to main content

Link

<ui5-link>

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";

Basic Sample​

Properties​

disabled​

DescriptionDefines whether the component is disabled.
Note: When disabled, the click event cannot be triggered by the user.
Typeboolean
Defaultfalse

tooltip​

DescriptionDefines the tooltip of the component.
Typestring | undefined
Defaultundefined
Since2.0.0

href​

DescriptionDefines the component href.
Note: Standard hyperlink behavior is supported.
Typestring | undefined
Defaultundefined

target​

DescriptionDefines the component target.
Notes:
- _self
- _top
- _blank
- _parent
- _search
This property must only be used when the href property is set.
Typestring | undefined
Defaultundefined

design​

DescriptionDefines the component design.
Note: Avaialble options are Default, Subtle, and Emphasized.
Type"Default" | "Subtle" | "Emphasized"
Default"Default"

wrappingType​

DescriptionDefines how the text of a component will be displayed when there is not enough space.
Note: By default the text will wrap. If "None" is set - the text will truncate.
Type"None" | "Normal"
Default"Normal"

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.2.0

accessibleNameRef​

DescriptionReceives id(or many ids) of the elements that label the input
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

accessibleRole​

DescriptionDefines the ARIA role of the component.
Note: Use the LinkAccessibleRole.Button role in cases when navigation is not expected to occur and the href property is not defined.
Type"Link" | "Button"
Default"Link"
Since1.9.0

accessibilityAttributes​

DescriptionDefines the additional accessibility attributes that will be applied to the component. The following fields are supported:
- expanded: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values: true or false.
- hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values: dialog, grid, listbox, menu or tree.
TypeLinkAccessibilityAttributes
Default
Since1.1.0

accessibleDescription​

DescriptionDefines the accessible description of the component.
Typestring | undefined
Defaultundefined
Since2.5.0

icon​

DescriptionDefines the icon, displayed as graphical element within the component before the link's text. The SAP-icons font provides numerous options.
Note: Usage of icon-only link is not supported, the link must always have a text.
Note: We recommend using аn icon in the beginning or the end only, and with text.
See all the available icons within the Icon Explorer.
Typestring | undefined
Defaultundefined
Since2.0.0

endIcon​

DescriptionDefines the icon, displayed as graphical element within the component after the link's text. The SAP-icons font provides numerous options.
Note: Usage of icon-only link is not supported, the link must always have a text.
Note: We recommend using аn icon in the beginning or the end only, and with text.
See all the available icons within the Icon Explorer.
Typestring | undefined
Defaultundefined
Since2.0.0

Slots​

default​

DescriptionDefines 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.
TypeArray<Node>

Events​

click​

DescriptionFired when the component is triggered either with a mouse/tap or by using the Enter key.
TypeCustomEvent<LinkClickEventDetail>
ParametersaltKey: boolean
Returns whether the "ALT" key was pressed when the event was triggered.
ctrlKey: boolean
Returns whether the "CTRL" key was pressed when the event was triggered.
metaKey: boolean
Returns whether the "META" key was pressed when the event was triggered.
shiftKey: boolean
Returns whether the "SHIFT" key was pressed when the event was triggered.
BubblesYes
CancelableYes - via preventDefault()

Methods​

No methods available for this component.

CSS Parts​

NameDescription
iconUsed to style the provided icon within the link
endIconUsed to style the provided endIcon within the link

More Samples​

Design​

The Link supports Default, Subtle and Emphasized designs.

Text Truncation and Wrapping​

The ui5-link wraps by default. To truncate it - set wrapping-type="None".

Custom Styling​

The links can be customized with pure CSS, applied on the tag.

Icons​

You can add icons to the Link.