action

Button

The primary interactive element for triggering actions.

Buttons are the action layer of every interface. They communicate what users can do next and provide feedback that the action was registered. Every button needs at least 6 states to work correctly.

Anatomy

  • Label / text
  • Container / background
  • Icon (optional, left or right)
  • Loading spinner (for async actions)

Variants

Primary (filled accent)Secondary (outlined)Ghost (no background)Danger (red, destructive actions)Icon-only (with tooltip)

States

DefaultHover (darker background)Active/pressed (scale down)Focus-visible (ring)Disabled (opacity)Loading (spinner + locked width)

Rules

✓ Do

  • •One primary button per screen section
  • •Specific, verb-first label ("Save changes", not "Submit")
  • •Minimum 44px touch target height

✗ Don't

  • ×Don't use multiple primary buttons side by side
  • ×Don't use vague labels like 'Click here'
  • ×Don't remove focus ring

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Three button tiers: primary (filled accent, 44px height), secondary (outlined, same height), ghost (no border, accent text). All: 500-600 weight, 10px/20px padding. One primary per screen section.