Buttons

Six semantic variants covering every use case from primary CTA to destructive actions.

All variants × all sizes.

Leading and trailing icon placement using data-[icon] padding offsets.

Loading swaps the icon for a spinner while keeping button dimensions stable.

Destructive is intentionally muted (tinted, not filled) to prevent mis-clicks. Use a confirmation step before irreversible actions.

Non-primary variants × all icon sizes for toolbars and compact actions. Primary buttons always need a visible label.