Link

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

Design

Up to date

React

Up to date

Overview

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.

Variants

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

Standalone links are a default variant used on their own or directly after the content. A standalone link can be supported by an icon.

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.

Formatting

Anatomy

Label: Communicates what is being linked to, or describes the action that will be triggered.

Icon: Visually supports standalone links to help users better understand the context and recognize the action that will be triggered.

Sizing

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.

Link variants

Standalone link

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.

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

Button

Typography

Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.