Components

Link

Links are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content.

Overview

A link is a reference to a resource. This can be external (e.g. a different web page) or internal (e.g. a specific element in the current document).

A text link with arrow icon

When to Use

Use a list to navigate to a different page within the application, navigate to an entirely different site, jump to an element on the same page, or link to emails and phone numbers.

When Not to Use

Use a button instead of a link for actions that will change data or manipulate how it is displayed, change a state, or trigger an action. Buttons should never be used for navigational actions.

Formatting

Anatomy

Accordion anatomy diagram
  1. Link Label
  2. Icon (optional): ri-arrow-right-line

Variants

Accordion anatomy diagram
  • Standalone: These links are the default link variant. They are used on their own or directly following content and they do not use underlines. They can be paired with an icon.

  • Inline: Inline links are used within a sentence or paragraph and are styled with an underline. They should not be paired with an icon.

Content

Do

  • Keep labels concise
  • Accurately reflect the content users will find at the link destination
  • Have icons the same color as the text

Don't

  • Use vague labels such as "click here"