Confirmation dialog
v3.0
Confirmation dialogs ask users to confirm a potentially destructive action, a high-impact decision, or accept or reject terms.
The title is required and frames the decision the user needs to make. A strong title is specific about the action being confirmed and often posed as a question.
The body is required and explains what will happen if the user confirms or rejects. A strong body clearly states the consequences, especially for destructive or irreversible actions, and includes specific details.
Confirmation and cancel buttons are required. Selecting one of the two actions is the only way to dismiss the dialog.
The primary action button confirms and executes the action, so the label should clearly describe user’s action.
The cancel button dismisses the dialog without taking action. Common labels for cancel buttons are “Cancel” and “Go back”.
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.
Confirmation dialogs can be dismissed by clicking either the confirmation or cancellation action. Pressing the escape key on a keyboard will register as the cancellation action.
The alert dialog button is positioned along the trailing edge of the dialog container below the body content.
Confirmation dialogs are a fixed width to maintain readability and encourage short, simple messaging. They flex vertically to fit their content down to a maximum height of 400px.
Alert dialogs on small screens are centered.
Confirmation dialogs on large screens are centered and inset as well.
Do ensure confirmation dialogs do not scroll.
Don’t pack confirmation dialogs with content that would cause it to flex beyond the maximum height or scroll.
Do use confirmation dialogs when informing a user of a decision’s impact. These dialogs present two actions and are dismissed by interacting with one of them.
Don’t use a confirmation dialog when an alert is triggerd by the system.
Do utilize CTA buttons to direct user to interact before dialog is dismissed.
Don’t show confirmation dialogs without CTA buttons.
Do always use a primary button with a borderless button
Don’t use secondary or tertiary buttons.
Do always center-align alert and confirm dialogs.
Don’t bottom-align alert and confirm dialogs.
Confirm dialog
Confirmation dialogs fade in and out from the center of the screen.
Confirmation dialogs are commonly triggered by a user action, like deleting a record. However, the application can trigger a confirmation dialog to appear to inform the user of an important update that requires their attention.