Live demo of

Buttons & links

The Button primitive with its variants, sizes and states, plus the LinkUnderline component.

Variants

Pick a variant per intent. Destructive actions get their own pair of variants.

Status ghosts

Tinted ghost variants used for inline status actions, like the close buttons of alerts and toasts.

Sizes

Three text sizes and three icon-only sizes.

With icons

Drop an icon in the default slot or use the dedicated icon slot.

States

Disabled and loading states are built in — the loading prop swaps in a spinner and blocks clicks.

Underlined links

The LinkUnderline component for inline navigation, in its three variants.