UI Terms visual dictionary

Components

Dialog

A window that appears over the rest of the UI to prompt the user for input or attention before they can continue.

Dialogs are modal by default: they block interaction with the page behind them and trap keyboard focus. The native HTML `<dialog>` element handles this for free with `showModal()`. Radix, React Aria, and Headless UI all expose dialogs as a primitive. For destructive confirmations specifically, use an alert dialog. For non-blocking floating panels, use a popover.

Also called

modalmodal dialogmodal window

When to use

  • Critical decisions that interrupt the current task
  • Self-contained sub-tasks like editing a record
  • Confirming destructive actions

When not to use

  • Brief messages that don't need a response (use a toast)
  • Content anchored to a specific element (use a popover or hover card)
  • Long forms or complex multi-step flows (use a separate page)

Related

Alert dialogPopoverModal presentation

Source

W3C ARIA Authoring Practices Guide ('Dialog (Modal)'). Native HTML: `<dialog>` element with `showModal()`. Radix UI, React Aria, Headless UI.

Read the W3C ARIA pattern →