Confirmation dialog

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.

• Use sentence case
• Keep to 1 line
• Frame as a question when possible
• Don’t use ending punctuation, unless it’s a proper sentence like 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.

• Keep to 1-3 sentences
• Avoid repeating the header

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.

• Use sentence case
• Keep to 1-3 words
• Avoid generic labels like "Yes" or "OK"

The cancel button dismisses the dialog without taking action. Common labels for cancel buttons are “Cancel” and “Go back”.

• Use sentence case
• Keep to 1-2 words
• Avoid "No" unless the title is a clear yes/no question

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.