UX Patterns Guide
Back to compare picker

Modal dialog vs Confirmation dialog

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.

Modal dialog live exampleConfirmation dialog live example

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.Interrupt users only when the action has a meaningful consequence that cannot be safely recovered afterward.
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.A popup says Are you sure? with OK and Cancel but does not name the project, notes, or irreversible outcome.
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 content is only informational and does not require blocking the page.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 content is only informational and does not require blocking the page.
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
Interrupt users only when the action has a meaningful consequence that cannot be safely recovered afterward.
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
A popup says Are you sure? with OK and Cancel but does not name the project, notes, or irreversible outcome.
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.