Buttons communicate the action that will occur when the user clicks them. They contain a text label to describe the action, and an icon if appropriate.
Table of contents
- Best practices
- Button type
- Button with icon
- Button sizes
- Writing guidelines
- Position buttons consistently in the interface
- Reduce complexity by using a small number of actions. Too many actions can create confusion
Button component can be configured in a number of different ways. Here is a guide to when to use certain variations.
Button type (
|Primary||Used for the most important actions in any scenario. Don’t use more than one primary button in a section or screen to avoid overwhelming users|
|Negative||For destructive actions - when something can't be undone, for example, deleting entities|
|Positive||For use when the action has a positive connotation such as creating or publishing a new entity|
|Muted||Used for a secondary actions, the most commonly used button type|
|Naked||Used in minimal contexts|
Button with icon (
Button sizes (
|Large||Used for actions on empty states|
|Small||Used for when space is at a premium|
- To make
Button action-oriented, use a verb. EX: "Add field", not "New field"
- Consider what happens after a user clicks on the button and communicate that clearly in the copy. For example, “Get a UI Extension” vs “Explore all UI Extensions”
- Use clear and succinct copy