Different Link Designs
ui5-linkis 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.
UsageYou can set the
ui5-linkto be enabled or disabled.
To create a visual hierarchy in large lists of links, you can set the less important links as
Subtleor the more important ones as
Emphasized, by using the
hrefproperty is set, the link behaves as the basic HTML anchor tag (
) and opens the specified URL in the given target frame (
targetproperty). To specify where the linked content is opened, you can use the
Responsive behaviorIf there is not enough space, the text of the
ui5-linkbecomes truncated. If the
wrapproperty is set to
true, the text is displayed on several lines instead of being truncated.
ES6 Module Import
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.
Note: Avaialble options are
Note: When disabled, the
ui5-linkcannot be triggered by the user.
Note: Standard hyperlink behavior is supported.
- Available options are the standard values:
- This property must only be used when the
hrefproperty is set.
ui5-linktext should wrap when there is no sufficient space.
Note: The text is truncated by default.
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
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as
ui5-linkis triggered either with a mouse/tap or by using the Enter key.