Skip to contentSkip to navigation
DocsDocs

Link

A destination inside running text, underlined by default, routed by the application.

BetaSince 1.0.0
On this page

Overview

Show code, InRunningText.tsx

Variants

On

Running text. The default.

Off

A short list of destinations, where buttons would be too heavy and the context marks them.

Without the underline, in a short list of destinations.

Show code, WithoutUnderline.tsx

Looks like a button

A destination that should look like a button is a Button that goes somewhere: the same link, in a button's shape.

Anatomy

  1. Link

  2. Label

Show code, LinkAnatomy.tsx

Rules

A link names its destination, and is underlined in running text.

Use it when

  • A destination inside a sentence or a paragraph, such as a guide or a related page.
DoThe underline in running text.
Show code, UnderlinedInText.tsx
Don’tNo underline in a sentence: only its color tells it apart.
Show code, NoUnderlineInText.tsx

Labels

Link the few words that name the destination, not a whole sentence.

Accessibility

KeyAction
Tab, Shift+TabMoves focus to the next or previous link.
EnterFollows the link.

Related

  • An action, such as saving or deleting, even when it looks like text, or the next step of a flow.

  • Destinations in an application's navigation, such as a sidebar.

  • Previous and next pages of a sequence.