Modal

A dialog that takes the whole interface hostage, so it had better be worth it. The component handles the parts that are tedious and therefore usually skipped: focus trap, focus restore, Escape, and locking the page behind it.

Destructive confirm

Informational

What it handles for you

Focus trap

Tab cycles inside the dialog. Without it, Tab walks out into the page behind the overlay — invisible, but still focusable.

Focus restore

Closing returns focus to whatever opened it, so keyboard users do not get dumped at the top of the document.

Escape

Closes. Expected of every dialog, forgotten in most hand-rolled ones.

Scroll lock

The page behind stops scrolling while the dialog is open.

role + aria-modal

Announced as a dialog, with the title as its accessible name.