Components
Overlays
Overlays interrupt, so they earn their place. Dialogs use the native dialog element: focus is trapped, the page behind is inert, Escape closes, and focus returns to the trigger.
DialogSheetDropdownMenuTooltipCommandPalette
Dialogs
A dialog asks for a decision or a short piece of input. The title states the decision as a question, the body explains the consequence, and the footer names the action.
Destructive confirmation
Destructive operations are off by default. When the gate is open, the confirmation repeats the count and requires the exact phrase, so the action can never be a reflex.
Sheets
Sheets slide in from the edge for navigation on small screens and for side panels that keep the page in view. They share the dialog behavior for focus and Escape.
Tooltips
Tooltips name an icon or add a short clarification. They appear on hover and keyboard focus, stay while the pointer is over them, and Escape hides them. Never put essential information only in a tooltip.
Pause dispatchFencing tokens increase on every lease, so stale workers cannot commit.
Command palette
The palette is the fastest way around the portal. Open it with ⌘ K (Ctrl K on Windows) or / anywhere. Results filter as you type and the list is a proper listbox with an active descendant.
Layering
Dialogs, sheets and the palette render in the browser top layer, above everything. Below that, from top to bottom: toasts, menus and tooltips, the sticky top bar, then page content.
Revision r15 locked
Do
Close the dialog, then confirm with a toast
The dialog finishes the decision, the toast confirms the result. Each overlay has one job.
Dialog → dialog → dialog
Don't
Stack a dialog on a dialog
Nested dialogs trap people two levels deep. If a decision needs more room, move it to a page.