UI Component Lab 日本語

← All components

Overlay

Modal (Dialog)

A window on top of the page that blocks the rest of the page until it is closed.

Delete this file?

This action cannot be undone.

Also known as

How to recognize it

A box in the middle of the screen over a dimmed background, usually with a title, a message, and buttons such as Cancel and OK.

Behavior

  • When it opens, focus moves into the dialog.
  • While it is open, the page behind cannot be clicked or reached with Tab.
  • When it closes, focus returns to the element that opened it.

Keyboard

KeyAction
Tab / Shift + TabMoves between focusable elements inside the dialog only.
EscCloses the dialog.

Usage notes

  • Use it to confirm a destructive action or to show a short, self-contained message.
  • Do not open it without a user action, and do not use it for forms, navigation menus or completion notices.
  • Add a separate close button only when there are no action buttons.
  • Alert: An alert dialog (a kind of modal) stops the user until they respond; an alert informs without interrupting.
  • Drawer: A modal dialog appears in the middle of the screen; a drawer slides in from an edge as a tall panel.
  • Popover: A modal blocks the page until it is closed; a popover leaves the page usable and closes on an outside click.

Sources