Actions

A visual study of the Button — the base variants, the same button across the radius ladder, with and without icons, icon-only, and the state ladder. Every figure renders live.

Base

The four color variants at rest — primary commits, secondary answers, subtle belongs to toolbars, destructive confirms damage.

The real components at rest.

Icons

A button reads the same without an icon, with a leading icon, or with a trailing icon — the icon rides the button's own slot gap.

No icon · leading icon · trailing icon — --icon-md, in the button's slot gap.

Icon buttons

Icon-only actions — the accessible label carries the meaning the icon shows.

Radius

The same primary button across the radius ladder — the corner follows the surface, and the pill is the far end.

radius-0

radius-2

radius-3 · default

radius-4

radius-full

States

The primary button's state ladder — the hover and press steps of the CTA ladder, and keyboard focus. Hover and press the live buttons to feel them.

--cta-bg · --cta-fg

--cta-bg-hover · --cta-fg

--cta-bg-active · --cta-fg

--cta-bg · --ring-focus