Example
Props
Disabled
To disable a button, use the isDisabled prop.
Prominence
High prominence
Highlight important actions and establish a clear hierarchy with buttons of "high" prominence. Avoid using more than 1-2 in the same view, which could dilute their effectiveness.
Low prominence
Pair “low” prominence buttons with other buttons to surface less prominent actions. Also appropriate for dense interfaces, like a toolbar, that would appear crowded by other button styles.
Tone
The default button prominence is only available in the “neutral” tone.
Critical tone
The “critical” tone is for emphasizing actions that can be destructive or have negative consequences if taken. Use it sparingly.
Accent tone
The high prominence button receives an “accent” tone by default. The “accent” tone can be used to differentiate low prominence actions.
Slots
Buttons are composed of slot components.
Icon
Place an Icon next to the label to both clarify an action and call attention to a button.
When accompanying an icon, button labels must be wrapped with a Text component.