UX Patterns Guide
Back to compare picker

Modal dialog vs Confirmation dialog

A modal dialog creates a temporary focused mode for a short task. A confirmation dialog is the narrower decision pattern used when a pending action has a meaningful consequence.

Modal dialog live exampleConfirmation dialog live example
Learn the decision

Match the interaction to the person's task

A modal dialog creates a temporary focused mode for a short task. A confirmation dialog is the narrower decision pattern used when a pending action has a meaningful consequence.

Modal dialog

Use it when: A short task must interrupt normal page interaction but should return users to the same context afterward.

Make this state clear: Closed page state with an obvious invoking control.

Observe the result: Opening moves focus to the display-name field, Tab remains inside the layer, Escape cancels, and closing returns focus to Open dialog.

Study the full pattern →

Confirmation dialog

Use it when: The action is destructive, irreversible, costly, security-sensitive, privacy-affecting, or externally visible.

Make this state clear: Pre-action state with an explicit consequential trigger.

Observe the result: Cancel, Escape, and Keep archive leave the archive unchanged and return focus to Delete archive.

Study the full pattern →

Practice the judgment: Imagine this situation: Treating every modal as a confirmation and adding vague Are you sure copy to low-risk editing tasks. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.

Review the underlying principle →

Decision dimensions

Dimension Modal dialogConfirmation dialog
UI or UX UI + UX - Focused modal task layerUI + UX - Consequential alert decision
UI guidance Render a titled layer above a dimmed or otherwise unavailable page, with clear task content, named actions, visible close or cancel affordance, and stable scroll boundaries.Render an alert-style modal decision with a specific title, consequence description, safe cancellation, and a destructive action label that names the object or scope.
UX guidance Use the modal interruption only for compact tasks that genuinely need temporary focus before the user returns to the page.Help the person reach a clear task outcome.
Good UI Account settings opens in a titled dialog with one display-name field, Save, Cancel, close control, and dimmed inactive page context.Delete Research archive? explains that 14 notes and shared links will be permanently removed, offers Keep archive, and labels the danger action Delete archive.
Bad UI A vague popup titled Popup floats over active page controls and offers only OK.The red destructive action is enabled immediately and sits where users expect the routine primary button.
Good UX Opening moves focus to the display-name field, Tab remains inside the layer, Escape cancels, and closing returns focus to Open dialog.Cancel, Escape, and Keep archive leave the archive unchanged and return focus to Delete archive.
Bad UX Users can click background Delete or Navigate controls while the modal is still open.Every archive, filter, and dismiss action opens the same confirmation until users click through automatically.
Best fit A short task must interrupt normal page interaction but should return users to the same context afterward.The action is destructive, irreversible, costly, security-sensitive, privacy-affecting, or externally visible.
Avoid when The workflow is long, multi-step, shareable, or needs browser navigation.The action is routine and easily reversible.
Required state Closed page state with an obvious invoking control.Pre-action state with an explicit consequential trigger.
Accessibility burden Use dialog semantics with an accessible name from the visible title.Use alertdialog semantics or platform equivalent when the decision is urgent and requires a response.
Common misuse Using a modal as a generic container for routine information that could stay inline.Asking users to confirm every routine action until they stop reading.

Modal dialog

UI or UX
UI + UX - Focused modal task layer
UI guidance
Render a titled layer above a dimmed or otherwise unavailable page, with clear task content, named actions, visible close or cancel affordance, and stable scroll boundaries.
UX guidance
Use the modal interruption only for compact tasks that genuinely need temporary focus before the user returns to the page.
Good UI
Account settings opens in a titled dialog with one display-name field, Save, Cancel, close control, and dimmed inactive page context.
Bad UI
A vague popup titled Popup floats over active page controls and offers only OK.
Good UX
Opening moves focus to the display-name field, Tab remains inside the layer, Escape cancels, and closing returns focus to Open dialog.
Bad UX
Users can click background Delete or Navigate controls while the modal is still open.
Best fit
A short task must interrupt normal page interaction but should return users to the same context afterward.
Avoid when
The workflow is long, multi-step, shareable, or needs browser navigation.
Required state
Closed page state with an obvious invoking control.
Accessibility burden
Use dialog semantics with an accessible name from the visible title.
Common misuse
Using a modal as a generic container for routine information that could stay inline.

Confirmation dialog

UI or UX
UI + UX - Consequential alert decision
UI guidance
Render an alert-style modal decision with a specific title, consequence description, safe cancellation, and a destructive action label that names the object or scope.
UX guidance
Help the person reach a clear task outcome.
Good UI
Delete Research archive? explains that 14 notes and shared links will be permanently removed, offers Keep archive, and labels the danger action Delete archive.
Bad UI
The red destructive action is enabled immediately and sits where users expect the routine primary button.
Good UX
Cancel, Escape, and Keep archive leave the archive unchanged and return focus to Delete archive.
Bad UX
Every archive, filter, and dismiss action opens the same confirmation until users click through automatically.
Best fit
The action is destructive, irreversible, costly, security-sensitive, privacy-affecting, or externally visible.
Avoid when
The action is routine and easily reversible.
Required state
Pre-action state with an explicit consequential trigger.
Accessibility burden
Use alertdialog semantics or platform equivalent when the decision is urgent and requires a response.
Common misuse
Asking users to confirm every routine action until they stop reading.
Decision rules
  • Use a modal dialog when the user must complete a short contained task before returning to the page, such as editing one account field or choosing a date.
  • Use a confirmation dialog when the only task is deciding whether to continue with a destructive, costly, security-sensitive, or difficult-to-reverse action.
  • Use a regular modal form when the user can review or edit values; use confirmation copy when the action consequence is the content being reviewed.
  • Use an inline panel, drawer, or page section when background context must remain interactive while the user works.
  • Use a full page instead of a modal when the task needs deep navigation, long-form content, autosave, or durable URL history.
  • Use a toast, banner, or inline message when the user only needs feedback and should not be blocked from the current page.
Inspect live examples
Modal dialogConfirmation dialog
Failure modes
  • Treating every modal as a confirmation and adding vague Are you sure copy to low-risk editing tasks.
  • Using a generic modal shell for destructive actions without naming the object, consequence, and safe cancellation path.
  • Leaving background controls usable while the modal is open, so users can change page state behind the focused task.
  • Using a modal for long workflows that need navigation, saved progress, or shareable state.

Saved items