Usage
Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content. You can place icons on a link to make them more specific.
Overview
Links are used as navigational elements and can be used on their own or inline with text. They provide a lightweight option for navigation but like other interactive elements, too many links will clutter a page and make it difficult for users to identify their next steps. This is especially true for inline links, which should be used sparingly.
Usage
Use
- Navigate to a different page within the application
- Navigate to an entirely different site
- Jump to an element on the same page
- Link to emails or phone numbers
Do not use
- You could use a button to trigger the action instead.
- Buttons should never be used for navigational actions.
There is no target or reference to be linked to.
Types
There are four different link types:
- Default
- Emphasized
- Subtle
- Link with icon
Guidelines
Use a meaningful link text that indicates what will happen when the user interacts with the link (for example, Open Sales Order). Avoid texts such as Click Here or Link, as these do not meet accessibility standards.
Default
Use a default link if you want to display a simple link.
Emphasized
Use an emphasized link for extraordinarily important links that need to attract the user’s attention quickly.
Subtle
Use subtle links to distinguish between important (default) and less important (subtle) links when the app page is full of various links (10+). Subtle links allow you to improve the visual hierarchy in large data lists and tables.
Link with Icon
Use the link with icon when the user expects and profits from the icon in the UI context.
