Alert dialog

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.

• Use sentence case
• Keep to 1 line
• Don’t use ending punctuation, unless it’s a proper sentence like a question
• Avoid generic titles like "Error" or "Alert"

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.

• Keep to 1-3 sentences
• Avoid repeating the header
• Avoid technical jargon unless audience is technical

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”.

• Use sentence case
• Keep between 1-3 words

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.