Description

A dialog popup is a Popup which allows the user to enter information or make decisions.

Usage & Behavior

Structure

In addition to the basic elements of a Popup, a dialog popups contains a set of form components, such as Radio Buttons, Checkboxes, and Drop-down Menus.
A help icon (?) may appear next to the close icon (X) in the dialog's header, for additional contextual help.
Dialog popups may vary in width or height. In some cases, the size of the dialog popup can be responsive to choices made by the user or by error messages. See Field Validation.
The least destructive option will be the primary action button, on the bottom-right of the popup.

For detailed interaction information, see Popups.
For the interactions of other form components, see their individual pages, such as Text Field, Radio Button, Checkbox, Drop-down Menu, Date Picker etc.

The primary action button will be enabled even when the dialog box contains empty mandatory fields. In this case, clicking the main action button will:
- show an error message at the bottom of the dialog.
- disable the button.
For further information see Field Validation.

Keep the content short and informative.
Dialog popups may contain several Tabs, a Search field, or Drag and Drop components.
Scrolling the entire dialog should be avoided.

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

Zeplin link	Screen thumbnail

Zeplin link	Screen thumbnail
https://zpl.io/VKOlj6V