Link is a component used to create clickable links that lead to other web pages or elements. Links can be internal (within the same website) or external. It is a "quiet request" (visually subtle) control according to the Visual loudness scale guide.
Default link: An accent control that links to another web page.
Custom link: A link with customized functionality and visual appearance. When creating custom links, follow the basic rules of default links. Avoid excessive use of custom links in your interface. Color for hover and active states, and color for icon is calculated with CSS filter, so you do not need to set them by yourself.
The link uses the --text-link token for color without underline.
The link changes its color to --text-link-hover-active and displays a solid underline on hover. If the link includes an icon, the icon's color changes alongside the text as they share the same active zone.
The component's transparency decreases from 100% to 30% to indicate the disabled state. Use this state sparingly and provide a tooltip with a message for the disabled link.
The link uses the --text-link-visited token for color. This state is optional.
The link uses the --text-link-visited token for color and displays a solid underline on hover. This state is optional.
Link sizes should be generous. Large link sizes make it easier for users with low coordination or on mobile devices to activate links. Link size consideration is most important for links that are not contained within blocks or paragraphs of text, such as call to action links. Links should be at least 44px wide and 22px tall.
Links shouldn't be too large on mobile. Very large links that take up much of the viewport can be accidentally activated, such as when a user touches the screen to scroll up or down.
When clicking on a link that leads to another page or opens a modal window, the link text should clearly indicate the type of page or modal window it will be. Use an infinitive form ("What should be done?") for the link text.
Avoid using very short link names as they can be difficult to click. If the link is still very short, increase its target area.
Always put quotation marks inside the link.
If a sentence ends with an email, URL, or domain that is a link, don’t include a period at the end of the sentence as users often copy the address and may accidentally include the period.
Avoid putting punctuation marks in link text, except when the entire sentence is a link.
In lists, it is recommended to make the entire line a link to reduce visual clutter and improve click ability.
If a link spans two lines, ensure that the cursor remains consistent throughout the interline area by using display: block.
If there is limited space in the interface, use links instead of buttons in tables. If there is sufficient space, prefer using tertiary buttons.
In table rows, use 14px links. If the link is a URL leading to an external page, include the LinkExternal icon with M size and --icon-secondary-neutral color next to it. Ensure it has a margin-left: var(--spacing-1x).
Link leads to a page within the product. In this case, you don't need to add the LinkExternal icon to the link. Add URL only to the link text.
If the link leads to an external website or product, then only the LinkExternal icon next to the link should have a URL. The icon is always gray.
If the link leads to both a page within the product and an external resource, the text and LinkExternal icon must have a different URL and color. The text always leads to a page within the product, and LinkExternal icon always leads to an external resource.