Components
Button
componentinteractionCTAactionform
A clickable element that triggers a discrete action — the primary affordance for user intent.
When to use
- Form submissions, confirmations, and primary actions
- Hierarchy: primary (filled) > secondary (outlined) > ghost
- Use a single primary button per view to avoid diluting intent
Examples
- Primary: 'Save changes' (filled, brand color)
- Destructive: 'Delete account' (filled, danger color)
- Ghost: 'Cancel' (no fill, low visual weight)
See this in the wild
Analyze a site and look for button in the breakdown.
