Link Button

An action that reads like a link: text in the brand colour with an underline on hover, for low-weight actions and inline navigation that sits in a sentence or a card footer.

Preview

When to use

• For tertiary actions — Learn more, View all, Forgot password? — that should not compete with buttons.
• Inside text or a dense card footer, where a boxed button would be too heavy.

Reach for something else

• For the main action of a screen: that is a Button.

Anatomy

1. 1

   Label

   Brand ink, medium weight.

2. 2

   Underline

   Appears on hover and focus, 2px under the baseline.

3. 3

   Icon

   Optional trailing arrow or external-link glyph.

States

Accessibility

• An <a> when it navigates, a <button> when it acts — the element matches what it does.
• An external destination says so, with an icon and an accessible label.

Source

The Link Button is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.