Skip to main content

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

href​

DescriptionDefines the component href.
Note: Standard hyperlink behavior is supported.
Typestring
Default""

target​

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

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: for option "Normal" the text will wrap and the words will not be broken based on hyphenation.
Type"None" | "Normal"
Default"None"

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring
Default""
Since1.2.0

accessibleNameRef​

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

accessibleRole​

DescriptionDefines 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.
Typestring
Default"link"
Since1.9.0

accessibilityAttributes​

DescriptionAn 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
TypeAccessibilityAttributes
Default
Since1.1.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.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Design​

The Link supports Default, Subtle and Emphasized designs.

Text Truncation and Wrapping​

The Label truncates by default. To make it wrap - set wrapping-type="Normal".

Custom Styling​

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