Button

Five variants, three sizes, pill by default. The primary variant carries a glow token so there is exactly one obvious action per view — if two of them are on screen, the design is wrong, not the component.

Variants

Sizes

Heights come from --field-h-sm / --field-h / --field-h-lg, which are density tokens. Switch to Compact in the header and every button shortens without a single prop changing.

With icons

Disabled

Opacity plus pointer-events, and the glow is removed — a disabled primary that still glows reads as available.

API

variant'primary' | 'secondary' | 'outline' | 'ghost' | 'danger''primary'

size'sm' | 'md' | 'lg''md'

iconboolean — square icon-only button, needs aria-label—

squareboolean — corner radius instead of pill—

…restAll native <button> props, ref forwarded—