Link

Links are basic, text-based navigational elements.

Overview

Links are used as navigational elements that may appear on their own, within a sentence or paragraph (inline), or directly following the content they are related to.

When/How to Use

✅ Use Links to navigate to a different page within the application (outside of UI-Shell or established navigation patterns)

✅ Navigate to an external app or website

✅ Jump to an element on the same page, or reveal additional content that may be truncated or hidden by default. (Example: truncated text with a "Read more" link that would reveal the remaining content)

✅ Use Links to render emails or phone numbers in instances where you need those items to be interactive and actionable

When Not to Use

⛔ Don't use Links as a control to change data or manipulate how a page's content is displayed, change an item's state, or trigger an action.

Variants

Along with the default link style, there are two(2) additional variants:

• Link-Inline

• Link-HasIcon

Inline

The Link-Inline variant should be used when links are included in a body of text. The only difference between default Link and Link-Inline is that the inline variant contains an underline text-decoration by default. This is to help visually differentiate the link from its surrounding text.

HasIcon

The Link-HasIcon variant includes an icon for scenarios where the additional visual cue can be helpful in conveying meaning to users. The icon should always be placed before the link's text—never after.

The HasIcon variant should never be used in conjunction with the Inline variant.

Interactive States