Dialogs provide the user with a focused way of accomplishing, confirming, or viewing something without entirely leaving a screen or page.
- Dialogs are useful for interactions that are relatively quick (less than a couple minutes)
- Dialogs float above the application until the user has taken a desired action or dismissed the dialog
- Dialogs can be used for managing settings, editing/creating simple objects, confirming an action, or any other set of information/actions that warrant not leaving the page
- Dialogs are usually opened from a click action
- Dialogs may or may not block interactions “behind” or “under” the dialog (see modes)
- If there is a non-destructive dismiss/cancel, dialogs can be closed by clicking outside of the dialog
Header / title bar
- Short and concise title
- Sentence case title
- Dismiss (X) icon if a non-destructive ‘cancel/done’ is applicable
- Can contain text or UI controls focused on a particular task, process, or entitiy
- Can scroll independently depending on the content, creating a pinned header/footer
- Contains action buttons
- Primary action buttons are right aligned
- Cancel/previous buttons are left aligned
- Use button styles that match the actions/priority, but if there more than two buttons with similar actions/priority, use the default button style for them all
- Buttons should use action verbs that describe by themselves what will happen on click (e.g., ‘Delete user’ instead of ‘Ok’)
Start of Dialog
End of Dialog
A confirmation dialog is short, simple dialog that ensures the user is performing an action intentionally. This is especially useful for dangerous or irreversible operations.
An actionless dialog may block user interaction for a period of time, usually until something finishes or some other event occurs.
Dialogs can prevent the user from performing actions behind/around the dialog if desired. There are 3 general modes:
- Modal: A modal dialog prevents the user from interacting with all other areas of the application until the dialog is dismissed.
- Modeless: A modeless dialog allows the user interact with all other areas of the application without dismissing the dialog.
- Mixed-modal: A mixed-modal dialog may block some areas of the application, but not others. E.g., a dialog pertaining to one document, but not another visible document.