Description
A dialog button allows the user to perform a single action when clicked.
There are 3 distinctive visual styles, depending on the importance of the action:
 | Regular Button |
 | Enter Button |
 | Emphasized Button |
Usage & Behavior
General guidelines
An Enter button can only appear once per window, pane, or dialog etc.
An Emphasized button can only appear once per window, pane, or dialog etc.
There could be multiple regular buttons.
Placement and Positioning
Enter buttons should be placed on the right of a container, beneath any related content such as popup text.
Regular and Emphasized buttons should be either:
placed to the left of the Enter button, separated by a space.
aligned to the left of the container. Do not use this option in wide containers where there will be a large space between buttons. See the example in the Best Practices section below.
Emphasized buttons should be placed on the left of any related Regular buttons.
 |
For further examples, see Popups.
Content
Only text can be displayed
States
State | Enter | Regular | Emphasized | Comment |
|---|---|---|---|---|
Regular (enabled) |  |  |  | |
Hover |  |  |  | |
Active |  |  |  | On clicking the button, but not yet triggering it, e.g. by releasing the left mouse button. |
Disabled |  |  |  | |
Error | N/A | N/A | N/A | In case of an error, the button should be disabled. |
Warning | N/A | N/A | N/A | |
Focused |  |  |  | |
Focused Hover |  |  |  | |
Focused Active |  |  |  | |
Focused Disabled |  |  |  |
Interaction
The Enter button can be triggered by either:
clicking on it, or
pressing the Enter key on the keyboard.
The Regular and Emphasized buttons are selected only by clicking.
Other interactions are shown in the States section above.
Validations and errors
Clicking a button can trigger a validation process, e.g. when confirming an action such as filling out a form. Where an input is invalid, the state of a button can be changed.
If a page, pane, or form has an error:
the related buttons are disabled.
an error message appears above or next to the buttons.
See Field Validation for more info.
Design
Zeplin link | Screen Thumbnail |
|---|---|
 | |
 | |
 |