AI assistant conversation view with tool calls, system messages, markdown, code blocks, multi-bubble grouping, and a resizable artifact preview panel for generated documents
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.
Default button with badge
Buttons can include a badge to highlight new or updated actions.