Links are navigational elements that may appear independently within a sentence or paragraph or directly after content.

Component checklist


Up to date


Up to date


Links are navigational elements with two variations: standalone and inline. Whether they are separate or used in line with text, links serve as a useful option for navigation depending on the context.

When using links, be economical. Remember that too many links, and inline links in particular, can overwhelm the user and make it harder for them to understand what action to take next on the page.



We differentiate two types of links according to their position amid the rest of the page content.

  1. Standalone links are a default variant used on their own or directly after the content. A standalone link can be supported by an icon.
  2. Inline links are used within a sentence or paragraph. In most cases, they should not be paired with an icon.


When to use

Use links when you want users to:

  • Go to another page within the platform
  • Go to a different website
  • Jump to another element on the page
  • Connect to an email or phone number


When not to use

Use a link button instead of a text-based link for actions that will manipulate data itself or how it is displayed, alter a state, or lead to an action.




Usage - Anatomy
  1. Label: Communicates what is being linked to, or describes the action that will be triggered.
  2. Icon: Visually supports standalone links to help users better understand the context and recognize the action that will be triggered.



The link element has several size variants that Soul has defined for text. The size should match the text type size it is in line with or the default text size (body medium) when using links separately from other content.

Usage - Sizes


Standalone links are used on their own, directly following the content. They should not be used within sentences or paragraphs. Standalone links are the default link style.

An icon can support a standalone link. The default size for the icon is medium, but you can use large in case you use a larger link size.

Usage - Variants - Standalone link


Inline links are used in sentences or paragraphs of text. The inline link behaves the same as the standalone link.

Inline links should not be used on their own and should not be paired with icons in most cases.

Usage - Variants - Inline link