Overlays

Surfaces that open over the page instead of beside it. They differ by how much they take — a corner, a side, the middle — and by what it costs the reader to leave them.

Modal The middle of the screen, and the page behind it put on hold: for a choice that has to be made before anything else. Panel A side of the screen, the page still readable beside it: for something consulted alongside rather than instead. Confirm The one question a destructive action is worth, and the promise that nothing happens until it is answered. Backdrop The layer all of these are stacked on, on its own: what opens it, what closes it, and in which order. Tooltip A few words beside what the pointer or the focus is on, turned away from the window's edges. Tour A page shown step by step, remembered once finished or dismissed.