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.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Design

Zeplin link	Screen Thumbnail
https://zpl.io/29NpG7A
https://zpl.io/bJOdGjK
https://zpl.io/V4Mx83X

Code