---
description: Links are basic, text-based navigational elements.
---

# Link

## 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**

:white\_check\_mark: Use Links to navigate to a different page within the application (outside of UI-Shell or established navigation patterns)

:white\_check\_mark: Navigate to an external app or website

:white\_check\_mark: 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)

:white\_check\_mark: Use Links to render emails or phone numbers in instances where you need those items to be interactive and actionable

#### When Not to Use

:no\_entry: 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.

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-MadqPihdT3RozsaeUvx%2F-MaeS7I_XOVnLHqEGhiM%2FLink%20-%20Hero%402x.jpg?alt=media\&token=687c14cd-aee1-42d6-b490-0b44ed71d949)

## 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.

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-MadqPihdT3RozsaeUvx%2F-MaeTfVk0OsxJkjSFdG-%2FLink%20-%20Inline%402x.jpg?alt=media\&token=a0216a7a-ee41-4a65-b3d4-8a090640b6f1)

### 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.&#x20;

{% hint style="warning" %}
The `HasIcon` variant should never be used in conjunction with the `Inline` variant.
{% endhint %}

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-MadqPihdT3RozsaeUvx%2F-MaeWEge6TWnOCzuwO8l%2FLink%20-%20Has-Icon%402x.jpg?alt=media\&token=8bdfc982-4b94-4804-9065-a9278faf4c32)

## Interactive States

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-MadqPihdT3RozsaeUvx%2F-Maeas6QuC03pyNy0Gou%2FLink%20-%20States%402x.jpg?alt=media\&token=4f4433da-24c6-450b-b638-1161bc6f0a73)
