Link

Links are used as navigational elements, usually as part of larger content sections or paragraphs, and take the user to a new location by opening a new, separate web tab.

The link element has a very simple anatomy, composed by underlined text. When the link is part of a paragraph, it will have the same text style as the paragraph.

Underline text enforces the meaning of the link’s action.
Label sets the label of the link.

When to Use

Use a link when you need to take the user to another page on a separate tab. You can use it alone or as part of a paragraph as inline text.

When Not to Use

Don’t use a link when you want the user to have context or execute an action on the current page. Use buttons instead.


Variation	Purpose	Icon	Sizes	Colors
Standalone link	Use on its own to take the user to a new page.	No icon	Depending on the hierarchy and the surrounding content, links can have one of the body typography sizes.	Neutral 85, cyan 30
Inline text link	Use as part of a sentence or paragraph to take the user to a new page.	No icon	Same typography size as the paragraph it is part of, one of the body typography sizes.	Neutral 85, cyan 30

Because of the nature of links, this component has a unique status: visited.

Default

The link hasn’t been clicked, and the page of the link hasn’t been visited.

Visited

The link has been clicked, and the page of the link has been opened.

Depending on the hierarchy and the surrounding content, links can have one of the body typography sizes. If it is part of a paragraph, the link will be the same size as the rest of the text.

Link sizing do — Do use the same typography size as the paragraph for in-line text links.

Links sizing don't — **Don’t** use a different typography size from the paragraph for in-line text links.

Link over a red background — Red background

Link over a red purple — Link over a purple background

Link

Anatomy

Usage

When to Use

When Not to Use

Variations

Behavior

Default

Visited

Sizing

Themes

Layout Section

List Group