Button

Four variants, three sizes. Labels are always Berkeley Mono (uppercase tracking). Styled with component tokens from components.css.

Variants

Primary

Secondary

Ghost

Destructive

Sizes

sm (28px)

md (36px)

lg (44px)

States

DEFAULT

HOVER Hover over any button to see

FOCUSED Focus ring via :focus-visible

ACTIVE

DISABLED

WITH ICON

ICON ONLY

All Variants (hover to interact)

VARIANT DEFAULT DISABLED

PRIMARY

SECONDARY

GHOST

DESTRUCTIVE

TOKEN REFERENCE

Buttons use component tokens from components.css:

--button-font: var(--type-label-font)--button-radius: var(--radius-md)--button-transition: var(--duration-instant) var(--easing-default)--button-primary-bg: var(--color-accent)--button-md-height: 36px