Related Pages: Popups, Message Popups
Description
A dialog is a Popup which allows the user to enter information or make decisions.
Usage & Behavior
General guidelines
Structure
In addition to the basic elements of a Popup, a dialog contains a set of form components, such as Radio Buttons, Check Boxes, and Drop-down Menus.
A help icon (?) may appear next to the closing icon (X) in the dialog's header, for additional contextual help.
Dialogs may vary in width or height. In some cases, the size of the dialog can be responsive to choices made by the user or by error messages. See Field Validation.
The least destructive action will be the default button, located on the right-end of the popup.
Interaction
For detailed popup interaction information, see Popups.
For the interactions of other form components, see their individual pages, such as Text Field, Radio Button, Check Box, Drop-down Menu, Date Picker etc.
Validations and errors
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.
Best practices
Keep the dialog content short and informative.
A dialog may contain several Tabs, Search, or /wiki/spaces/~347593403/pages/918783940 components, but scrolling the entire dialog should be avoided.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |