When you have a simple action you want users to confirm, it can help to break them out of their main flow. Focus on the action using a dialog.
Dialogs cover any other content until the action is completed or canceled. Because they interrupt a user’s main flow, use as few as possible to minimize disruption. If you have more complex information to include, use a modal instead.
Component status





Content structure

Guidelines
Keep it simple
Dialogs are best as single actions where the context is clear and doesn’t need a lot of explanation. Don’t overwhelm your users with information.
Open on user action
Dialogs are disruptive to the main flow. Only start one after the user has taken an action so it’s clear why it was triggered.
Make action clear from title
The title should make it clear what action users are expected to take or what they’re agreeing to. Keep it short and save any details for the description.
Allow users to close
Users want to feel in control of their actions. Since dialogs interrupt the main user flow, they can invoke negative feelings in users. Make sure users feel in control by offering them a clear option to cancel the dialog and get back to the main flow.
There are situations that all users need to complete before continuing (like accepting terms for an additional service), but it should still be possible to go back to the previous point in the flow.
Warn about destructive actions
If the action related to the dialog is irreversible or removes something, use a critical button to make the consequences clear to users.
Related components
Modal
Dialogs are great for displaying small bits of information to allow users to complete a single action. For anything that requires more information or structure, use a modal.
Popover
Dialogs interrupt the main user flow to focus on a single related action. If you have additional details or other interactions related to something on the current screen, use a popover. Popovers are also useful to present information that does not block other content on wide screens.
Toast
Dialogs interrupt the main user flow to focus on an action. For a temporary message without actions, use a toast.