Button
Primary interactive element for user actions. Supports multiple variants and sizes.
Variants
Primary
sm
md
lg
Secondary
sm
md
lg
Ghost
sm
md
lg
Destructive
sm
md
lg
Design Tokens
Primitive
--color-teal-600
#0D9488
Semantic
--color-interactive-primary
var(--color-teal-600)
Component
--button-bg-primary
var(--color-interactive-primary)
Usage Guidance
✓ Do
Use Primary for the main action on a page
Use Ghost for secondary navigation or filters
Use Destructive for irreversible actions only
Match button size to content hierarchy
✗ Don't
Mix multiple Primary buttons in one section
Use arbitrary colors outside the token system
Create new variants without documentation
Override hover or active states