Variants

Sizes

With icons

Icon only

Loading and disabled

Grouped

Full width

Actions that navigate

An action with a destination is an anchor, not a button with a handler — it can be opened in a new tab, copied, and it works before JavaScript arrives. Same classes, so a link and a button side by side line up on the same control scale. ButtonLink in the library; href is required, and there is no loading or disabled state because a link can have neither.

One primary action per view. Hover and pressed states step down the accent ramp; keyboard focus is the 2px accent :focus-visible ring at 2px offset. Icon-only buttons always carry an aria-label.