Button
What buttons communicate, when to use SplitButton instead, and how to choose colorScheme, variant and icons.
Buttons allow users to perform an action or to navigate to another page / view. Buttons let users understand what will happen next.
Alternatives
- SplitButton — For grouping related actions together.
colorScheme
Color scheme are used to indicate the importance of an action.
variant
Variant are used to change the visual style of a button.
Icons
Icons can be used in buttons when additional clarity is required and the icon is highly relevant to the action. Avoid using two icons in a button.
Use iconBefore to help the user learn about the action of the button quickly or to indicate the user will go back to previous step in the flow.
Use iconAfter to help the user learn if there is a change in the flow (open new tab or window for example) or to indicate the user will go to next step in the flow.