Link

Links are used as navigational elements, and can be used on their own, or inline with text.

Design documented

The component is fully documented

React documented

Flutter documented

Design

Is the design finished and component available in Figma library?

Up to date

React

Is new design vision part implemented using new tokens?

Up to date

Flutter

Is new design vision part implemented using new tokens?

Up to date

Introduction

Links provide a lightweight option for navigation, but like other interactive elements, too many links will clutter a page and make it difficult for users to identify their next steps. This is especially true for inline links, which should be used sparingly.

When to use

Use links when you want users to:

  • Navigate to a different page within the application
  • Navigate to an entirely different site
  • Jump to an element on the same page
  • Link to emails or 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.