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.
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.
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.
Defines the target area size of the link: - InteractiveAreaSize.Normal: The default target area size. - InteractiveAreaSize.Large: The target area size is enlarged to 24px in height. **Note:**The property is designed to make links easier to activate and helps meet the WCAG 2.2 Target Size requirement. It is applicable only for the SAP Horizon themes. **Note:**To improve ui5-link's reliability and usability, it is recommended to use the InteractiveAreaSize.Large value in scenarios where the ui5-link component is placed inside another interactive component, such as a list item or a table cell. Setting the interactiveAreaSize property to InteractiveAreaSize.Large increases the ui5-link's invisible touch area. As a result, the user's intended one-time selection command is more likely to activate the desired ui5-link, with minimal chance of unintentionally activating the underlying component.
Defines 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.
Defines 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.
Defines 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.
Defines 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.
Defines 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.
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.
Fired when the component is triggered either with a mouse/tap or by using the Enter key.
Type
CustomEvent<LinkClickEventDetail>
Parameters
altKey: 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.