Modal Dialog
When to reach for each dialog variant — alert, info, form, content, passive and blank — and how to phrase them.
Alert Dialog
Alert dialogs can be disruptive because they require users to take an action before returning to the application; they should be used thoughtfully and sparingly.
Acknowledgment
Acknowledgment dialogs are used when the system requires the user to acknowledge the presented information. It contains only a single action, commonly "Okay".
Confirmation
Confirmation dialogs are used to confirm significant user decisions. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur.
The title should in most cases be phrased as a short binary dichotomous question, so that the action is easy and clear to make. Read this UX article for more copywriting direction and tips.
Critical Confirmation
Critical confirmation dialogs describe destructive or irreversible actions. They are commonly used in situations where confirmation of an action would result in significant data loss if done accidentally.
Info Dialog
Use info dialogs to communicate impactful information at key moments:
- Celebrate the success of a large task
- Welcome a new user onboard
- Inform users that their free trial has ended
Form Dialog
Use form dialogs for supporting tasks that require a handle full of fields to be filled out.
Note: Do not put large forms inside a form dialog. Use side drawer or bottom drawer instead.
Content Dialog
Content dialogs are commonly used for short and non-frequent tasks, such as editing or management tasks. If a user needs to repeatably perform a task, consider making the task do-able from the main page.
Note: Do not put forms inside content dialog. Use form dialog instead.
Passive Dialog
Passive dialog is used when you want to block the screen while a critical process is happening in the background that should not be interrupted such as saving a long list of items or a payment operation.
A passive dialog cannot be closed by the user, it must be close programmatically after the background process is complete.
Blank Dialog
Note: This should be used in exceptional cases. Consider using one of the other dialogs before reaching for a blank dialog.