Button Design
The visual and behavioural design of the most fundamental interactive element in a UI.
Plain English
Buttons are the action layer of every UI. They need to look clickable before you hover, feel responsive when you press, and be impossible to miss when they are the primary action. Most design systems define three button tiers: primary (filled, accent colour — the one action you want users to take), secondary (outlined or ghost — for alternatives), and tertiary/ghost (minimal — for destructive or minor actions). Never put two primary buttons next to each other — there should always be one clear primary action per screen.
Technical
Button anatomy: padding (horizontal 16-24px, vertical 8-12px), border-radius (system radius), font (medium/semibold, 14-16px), min-width to prevent tiny buttons, and a clear text label. Must have all six states: default, hover, active, focus-visible, disabled, loading. Width: fit-content by default; full-width on mobile forms. icon+label buttons: gap: 8px between icon and text. Accessibility: use <button> element (not <div>), meaningful label, aria-disabled on disabled state.
Live Demo
Variants
States
Every button needs 6 states: default, hover, active, focus, disabled, and loading.
Usage
✓ Good usage
A page with one filled primary "Submit" button, one outlined secondary "Cancel" button, and a ghost "Reset" link — clear hierarchy, one obvious action.
✗ Bad usage
Three filled accent-coloured buttons in a row of equal size and weight — users cannot determine which action is most important.
Recommended values
- Padding: 10px 20px (standard), 8px 16px (compact), 12px 24px (large)
- Min-height: 40px (comfortable tap target)
- Font: 14-15px, 500-600 weight
- Border radius: match design system (6-12px)
- Primary: filled accent, Secondary: outlined, Tertiary: ghost
- One primary button per screen section maximum
Common mistakes
- Multiple primary buttons on the same screen — destroys hierarchy.
- Buttons without visible labels (icon-only) in non-obvious contexts.
- Button text that does not describe the action ("Click here", "OK") — be specific.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Three button variants: primary (filled accent, white text), secondary (outlined accent border, accent text), ghost (no border, accent text). All: 40px min-height, 10px/20px padding, 500 weight, 8px border radius. One primary per screen section.