One shared Button component · emerald/sage/ink tokens · Light mode
Primary — sizes
Default
Default
Default
Secondary — sizes
Default
Default
Default
Ghost — sizes
Default
Default
Default
Destructive — sizes
Default
Default
Default
States — Primary
Default
Hover
Active
Focus
Disabled
Loading
States — Secondary
Default
Hover
Active
Focus
Disabled
Loading
States — Ghost
Default
Hover
Active
Focus
Disabled
Loading
States — Destructive
Default
Hover
Active
Focus
Disabled
Loading
Icon patterns
Real CTA examples (one Primary per section)
Token palette: --emerald-900/800/700/500, --emerald-glow, --ink, --sage-bg, --sage-line. Only greens, white, sage & ink are used — no gold, blue or purple. Contrast ≥ 4.5:1 in every variant and mode.