Alert dialog
v3.0
Alert dialogs are highly interruptive modal dialogs that present critical application-level information. They require an explicit decision from the user before dismissing.
The title is required and quickly informs users the issue or situation. A strong title uses direct, specific language and lead with the key message or decision point.
The body is required and provides additional context about the action the user is being asked to take. A strong body clearly states what happened, why it matters, and explains the impact or consequence of the action.
The button is required and is the only way to dismiss the alert dialog. The label defaults to “Okay” but can be updated to other confirmative strings where applicable, like “Accept” or “Got it”.
See Buttons for more details on visual hierarchy and writing guidance.
The scrim is a semi-transparent overlay that focuses attention on the dialog. The scrim isn’t interactive and doesn’t dismiss the dialog.
Alert dialogs can appear at any time without notice. Because of this, they must be used sparingly and with heavy consideration. The dialog is aligned in the center of the screen and enter/exit using a quick fade animation.
The alert dialog button is positioned along the trailing edge of the dialog container below the body content.
Alert dialogs are a fixed width and have a max height of 400px.
Alert dialogs on small screens are centered.
Alert dialogs on large screens are centered as well.
Alert dialog content doesn’t scroll.
Don’t pack alert dialogs with content that would cause it to flex vertically or scroll.
Alert dialogs are reserved for critical information.
Don’t use alert dialogs for confirmation of an action or any other non-critical information. Use a confirmation dialog or snackbar instead.
Alert dialogs always have a confirming action.
Don’t have an alert dialogs without a confirming action.
Confirm dialog
