Dialogs 🔸 Snackbars 🔸 Banner 🔸 Alert

Name Term Defination Reference+Image

An alert dialog confirms the Alert dialogs interrupt users with
urgent information, details, or actions.
Alert Dialogs
action and informs the user of what will happen as a result.
https://storage.googleapis.com/spec-host/mio-staging%2Fmio-
design%2F1563837804615%2Fassets%
2F1sbarXPWT89_NKn2HTXzbTlVInPKZAn-T%2Fspecs-dialog-
mobile-alert.png

Simple dialogs display a list of items that take immediate effect https://storage.googleapis.com/spec-host/mio-staging%2Fmio-
when selected. design%2F1563837804615%2Fassets%
Simple Dialogs 2F1Vy5JKCHFFq0MDzD7L_DCTnawU4e5Y1oB%2Fspecs-
dialog-mobile-simple.png

Confirmation dialogs require users to confirm a choice before https://storage.googleapis.com/spec-host/mio-staging%2Fmio-

the dialog is dismissed. design%2F1563837804615%2Fassets%
Confirmation Dialogs 2F15bN9cs12hC90Rju5Fsnqy7sbSgbvtADK%2Fdialogs-
confirmationdialog.png

Form dialogs allow users to fill out form fields within a dialog.
For example, if your site prompts for potential subscribers to
Form dialogs https://material-ui.com/components/dialogs/
fill in their email address, they can fill out the email field and
Dialogs touch 'Submit'.
Full-screen dialogs fill the entire screen, containing actions
that require a series of tasks to complete.
Full-screen dialogs group a series of tasks, such as creating a
calendar entry with the event title, date, location, and time.
Because they take up the entire screen, full-screen dialogs are
the only dialogs over which other dialogs can appear. https://storage.googleapis.com/spec-host/mio-staging%2Fmio-
Full-screen dialogs may be used for content or tasks that meet design%2F1563837804615%2Fassets%
Full-screen dialogs
any of these criteria: 2F134ZzWcTpyDRxoATtvHrcIxiC5zcCD0mD%2Fdialogs-dialog-
Dialogs that include components which require keyboard windows.mp4
input, such as form fields
1. When changes aren’t saved instantly
2. When components within the dialog open additional dialogs
Full-screen dialogs are for mobile devices only. For tablet or
desktop, use a modal dialog.
Launching a full-screen dialog temporarily resets the app’s https://storage.googleapis.com/spec-host/mio-staging%2Fmio-
perceived elevation, allowing simple menus or dialogs to design%2F1563837804615%2Fassets%
Dialog windows 2F134ZzWcTpyDRxoATtvHrcIxiC5zcCD0mD%2Fdialogs-dialog-
appear above the full-screen dialog. windows.mp4

An acknowledgement notifies the user about system actions

occurring in the background. It appears for a short amount of
time and may include an option to undo the action.
Simple Snackbars https://material-ui.com/components/snackbars/
Use a snackbar to provide brief feedback about an operation.
Snackbars
When multiple snackbar updates are necessary, they should https://storage.googleapis.com/spec-host/mio-staging%2Fmio-
appear one at a time. design%2F1563837804615%2Fassets%
Consecutive Snackbars 2F1Ox5qX5je_tUiv8P9V9tTfGRTd3RTsvxh%2F02-
appearconsecutive.mp4
 Dialogs 🔸 Snackbars 🔸 Banner 🔸 Alert
A banner displays an important, succinct message, and
provides actions for users to address (or dismiss the banner). It
requires a user action to be dismissed.

Banners should be displayed at the top of the screen, below a

top app bar. They are persistent and nonmodal, allowing the https://storage.googleapis.com/spec-host/mio-staging%2Fmio-

Banner Banners user to either ignore them or interact with them at any time.
Optional: Banners remain until dismissed by the user, or if the
design%2F1563837804615%2Fassets%
2F1M_50ojwSC5XH6S5T_Rtoeb16AWNGhhPC%2Fbanners-
elements.png
state that caused the banner is resolved

Banners typically appear when a screen loads content.

Use alerts to deliver a persistent, in-app message that informs https://storage.googleapis.com/spec-host/mio-staging%2Fmio-

Alert Alert users of a particular change state. design%2F1563837804615%2Fassets%
2F1BoI4paN_Nf2sQliH6982aJIUAEaroM_c%2Funderstanding-
alerts-usage.png