Overlay
The floating-layer behaviours. Each one renders content above the page — the differences are whether it traps focus, how it is summoned, and how it is dismissed.
The pieces
| Component | Modal? | Summoned by |
|---|---|---|
| Dialog | Yes | A click on the trigger |
| AlertDialog | Yes | A click — confirmation, no accidental dismiss |
| Popover | No | A click on the trigger |
| HoverCard | No | Hover or focus — interactive content |
| Tooltip | No | Hover or focus — descriptive text only |
| Drawer | Yes | A click — slides from a screen edge |
| Sheet | Yes | A click — a Drawer pinned to the bottom |
Modal or not
The dividing line in this family is modality. A modal overlay — Dialog, AlertDialog, Drawer, Sheet — takes focus, traps it, and dims the page behind a scrim. The user must deal with it before returning to anything else. A non-modal overlay — Popover, HoverCard, Tooltip — leaves focus where it was and lets the page keep working.
Pick by interruption. A confirmation that must be answered is modal. A filter panel the user dips into and out of is not.
Summoned how, dismissed how
The other axis is how the overlay opens. Dialog and Popover open on a click. Tooltip and HoverCard open on hover or focus — which means a keyboard or touch user can reach them too, but also that they cannot hold anything a user must act on. Drawer and Sheet are Dialogs with a fixed edge.
Dismissal follows from modality. Modal overlays close on Escape and — except AlertDialog — on a scrim click. Non-modal overlays close on Escape and on a click outside.
Built on the a11y primitives
Every modal overlay here composes Portal, Overlay, and FocusScope. The headless component is the assembly that turns those three building blocks into a correct, dismissible, focus-managed surface.