Overview

Dialog

Dialogs appear in front of existing content to present important information or ask for user input. They focus the user's attention on the task at hand while keeping the underlying context visible.

Dialog

Usage

When to use
Use dialogs when you require users' decision or input, need to ask them to review crucial info or to provide additional information within context. It's interruptive by design, and therefore should be used thoughtfully and sparingly. Dedicate it to a single task and keep its content simple, such as confirmation of high-risk actions, short form submission, etc.
Information
In this use case, the dialog holds contextual information for the users to read and acknowledge. You may include a button that reads "OK", or "Got it" to get an explicit acknowledgement from the user, if needed.
Interactive
Use this when you require clear decision or input from users. This dialog box usually comes with a set of primary and cancel buttons.
Alert
Alert dialogs direct user attention to messages that communicate errors or potentially destructive actions.
How best to use
Don't
Don't include a close button if we need to direct user attention to the CTAs and need them to make a choice.
Don't
Don't nest dialogs. Only display one at a time.
Don't
Don't make the user further confirm an action that's not destructive, e.g. save for later.
When not to use
Don't use for system-generated messages
Don't surprise users with an uninvited, system-generated dialog. User actions, such as button selection, should trigger the dialog.
⁠
Don't use it if the user experience requires richer functions
Keep it simple and don't include navigations and excessive functions within a dialog.
⁠
Try not to use modal for scrollable content on mobile and tablet
If your content is lengthy, consider using alternative design patterns instead of a dialog on mobile and tablet.
Component comparison table
Component
How it's triggered
Usage
Attention and interaction
Can it be used for error messaging?
Dialog
User
Use sparingly as it's purposefully interruptive and launches a pop-up over the page. Requires user interaction to dismiss.
Immediate user attention and interaction
Yes
System alert
System
Provides a system-wide update and stays visible until it's dismissed.
No immediate attention or interaction required
No, unless exceptions are given
Page-level message
System or user
Presents important contextual information for users to take action. Commonly paired with form fields. Don’t auto dismiss.
Medium to high level of user attention and interaction
Yes
Snackbar
User
Provides light feedback without requiring user interaction.
Low attention and no interaction required
No