Overlays

Three mechanisms, and the difference matters when designing. An anchored panel hangs off the control that opened it and flips when there is no room. A dialog is modal — while one is open the rest of the page is inert, which is why a second overlay raised from inside a dialog renders beneath it. A drawer is modal too, but anchored to the right edge rather than centred.

Note that an overlay opens over the whole page, so unlike every other specimen here its body shows in your own colour scheme rather than in both frames at once. Switch your system theme to see the other.

Anchored panel

What every filter, sort and item menu is built from. There is no bottom-sheet presentation yet — a mobile design that wants one is asking for new work.

Light
Dark

Dialog

Confirm dialogs stack their buttons full-width below md, primary first. Escape and backdrop dismissal are ours, not the design's to specify.

Light
Dark

Drawer

Right edge only — no side input, because every caller used the right. Always closable too: the close button, backdrop click and Escape are unconditional rather than configurable, so a drawer designed without a way out is not buildable as drawn. extraClass carries the width; both real callers use 36rem capped at the viewport.

Light
Dark