Alert Dialog

Use alert dialogs to:

• Request confirmation before destructive actions that cannot be undone (e.g., deleting data, cancelling subscriptions)
• Present critical decisions that require immediate user attention
• Forcing a choice when proceeding without a decision would cause problems
• Display urgent warnings that require user acknowledgement and action

Do not use alert dialogs:

• For informational messages that don't require a decision, use a modal with a dismiss button instead
• When users should be able to cancel or dismiss without acting — use a modal with a cancel option
• For routine confirmations that aren't critical — use a modal instead
• When the decision is not urgent or critical, consider less disruptive patterns

Alert dialog vs modal

Structure

Alert dialogs contain:

• Title — Clear, concise heading describing the critical decision
• Text summary — Brief explanation of the situation and consequences
• Button group — Action buttons for user decisions (typically two options)
• Overlay — Darkened background that blocks underlying content

Key difference from modals: Alert dialogues do not include a close button but can be dismissed using Escape or clicking the overlay.

Alert dialog patterns

Destructive confirmation

Purpose: Request confirmation before permanent, destructive actions.

Composition:

• Title clearly stating the action
• Text summary explaining consequences
• Primary action button (destructive action)
• Secondary action button (safe alternative)

Example:

• Title: "Delete account permanently?"
• Description: "This will permanently delete your account and all associated data. This action cannot be undone."
• Actions: "Keep account" and "Delete account"

Critical choice

Purpose: Present two distinct options where a decision is required to proceed.

Composition:

• Title framing the choice
• Text summary providing context
• Two action buttons represent the choices

Example:

• Title: "Save your changes?"
• Description: "You have unsaved changes that will be lost if you continue."
• Actions: "Don't save" and "Save changes"

Forced acknowledgment

Purpose: Ensure users read and acknowledge critical information before proceeding.

Composition:

• Title stating the issue
• Text summary with important details
• Primary action button (acknowledgement and proceed)
• Secondary action button (alternative action)

Example:

• Title: "Confirm changes"
• Description: "Updating these values will generate a new calculation and set of results."
• Actions: "Confirm changes" and “Cancel and review”