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 |
For example:
 |
Usage & Behaviour
General guidelines
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.
Emphasized buttons should be placed on the left of any related Regular buttons.
For further examples, see Popups.
States
State | Enter | Regular | Emphasized | Comment |
|---|---|---|---|---|
Regular (enabled) |  |  |  | |
Hover |  |  |  | Mouse cursor is over the button, but it has not yet been clicked. |
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 |
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 buttons are disabled.
an error appears above or next to them.
Best practices
The Emphasized button can only appear once per window, pane, or dialog etc.
The Enter button can only appear once per window, pane, or dialog etc.
 |
