Intro
https://www.sap.com/design-system/live-examples/Link/Link_LE_AllLinkVariants.html
Visualization of different link types – live example
When to Use
Do
Use the link:
- To navigate to another page.
- To trigger an event.
Anatomy
- A link is an interactive element in text that is indicated by colored text or an underline.
- Text
- Underline
Anatomy of a link
Types
There are three different link variants:
- Default: To display a simple link.
- Emphasized: For very important links that need to attract the user’s attention quickly.
- Subtle: To distinguish between more important (default) and less important (subtle) links when the app page contains a large number of links (10+). Subtle links allow you to improve the visual hierarchy in large lists and tables.
https://www.sap.com/design-system/live-examples/Link/Link_LE_Variants.html
Link variants – live examples
Behavior and Interaction
To trigger the event or navigation, the user clicks the link.
If a link target has a specified URL, it can also be triggered via the context menu.
If the link can’t be triggered, display it in the disabled state. For example, if a content area is disabled, also show the links in this area as disabled.
https://www.sap.com/design-system/live-examples/Link/Link_LE_DefaultAndDisabledLink.html
A default link and a disabled link – live examples