Related Pages: Popups, Message Popups
Lead: Liav Nadler ONGOING
Description
A dialog is a Popup which allows the user to enter information or make decisions.
 |
Usage & Behaviour
General guidelines
Structure
In addition to the basic elements of a Popup window, 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 in-context help.
Dialogs can be any width or height. In some cases, the size of the dialog can be responsive to choices made by the user and any error messages. See Field Validation.
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 detailed validations and errors, see Field Validation.
Best practices
Keep the dialog content as 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 |
|---|---|
 | |
 |
Code
<<a box containing the code - discuss with Femi>>