Components
Core
Typography
Layout
Navigation
Form
Components
ButtonMarch 30, 2026 · Updated 5:40 p.m. PST
Usage
Buttons provide visual cues for actions and events. These fundamental components allow users to commit actions and navigate a page flow. Use a Button when a user needs to submit a form, start a new task or action, or trigger a new UI element to appear on the page.Best practices
| Guidance | Practices |
|---|---|
| Do | Convey clear action hierarchy: Each surface should only have 1 primary button. A majority of buttons should be in default or flat style. |
| Do | Promote clarity: Consider labels alongside icons where appropriate. |
| Dont | Overuse primary or special buttons: Overusing colored buttons will result in a page with less intentionality, create visual confusion and a lack of page hierarchy. |
Examples
Explore common configurations, variations, and states for this component.Semantics
We have four semantic buttons types: flat, default, primary, and destructive. Flat buttons are used to limit visual prominence, whereas primary emphasizes a single action. Use destructive for deletions that trigger dialog confirmations.