overlays

A modal list of choices that slides up from the bottom of a phone screen in response to something you just did, with cancel at the end.

A dialog that interrupts the flow to demand acknowledgement or confirmation of a consequential action before anything else can continue.

A surface anchored to the bottom edge that slides up over the content, often draggable between a peeked and an expanded height.

A small formatting bar that appears floating over a text selection and disappears when the selection is dropped.

The small dismiss control in the corner of a dialog, banner or panel, drawn as an X and named Close rather than X.

A temporary message anchored to a control that teaches what it does, often chained into a numbered sequence across a screen.

A keyboard-summoned overlay whose single search box finds and runs any command or destination in an application by name.

A modal that stops an action part way through to ask whether you meant it, naming the consequence in its confirm button rather than saying OK.

A panel docked to one edge of the screen that slides in over the content, holding navigation or the details of the thing you selected.

The loose everyday word for any panel that opens downward from a trigger, whatever the panel holds and whatever the trigger does with it.

A rich preview panel that appears on hover over a link or an avatar, summarising what is behind it.

A small dark translucent floating window of controls that hovers over content without taking it over, common in media and creative tools.

The panel opened by pressing question mark that lists every shortcut in the application, grouped by area.

An overlay that shows one image or video large over a dimmed page, with next and previous controls and a dismiss.

A large navigation panel that drops from a top level item and shows many links at once, grouped into columns with headings.

A window that opens over the page and takes control of it, so nothing behind can be used until the dialog is answered or dismissed.

A small panel of controls that floats just outside a window edge in visionOS, staying with the window without covering its contents.

A small confirmation bubble anchored to the control you just pressed, asking whether you meant it without opening a dialog over the page.

A small surface anchored to the control that opened it, holding content or controls of its own, and dismissed by clicking away or pressing Escape.

The small triangle joining a popover or tooltip to the thing it belongs to, which flips and slides as the popover repositions.

A tall modal anchored to the bottom of the viewport that holds a multi step creation flow, stackable when one flow opens another.

A tip revealed by clicking rather than hovering, so it works by touch and may contain links or controls a tooltip could not.

A brief text label shown on hover or keyboard focus that names or explains the element it points at, and carries nothing you can interact with.

A full width introduction shown on first entry to a feature, listing what is new or what to set up, with a way to skip it for good.

A CSS mechanism that tethers one element to another, sizing and placing it against its anchor and trying fallback positions when the default one would overflow.

A layout primitive that positions one element centred over its container, overlapping whatever is beneath rather than taking a place in the flow.

Keeping secondary regions parked outside the viewport and sliding them in on demand, instead of stacking them below the main content.

A small always on top window that keeps video or navigation visible in a corner while the reader works in another app or scrolls another page.

A self contained depth ordering created by certain properties, inside which z-index only competes locally and can never escape to the level above.

The layer above everything else in a document where fullscreen elements, modal dialogs and popovers render, escaping every ancestor's clipping and stacking order.

A notice asking permission to store non-essential cookies before the reader has done anything, offering accept, reject, and a route to per-purpose choices.

A one-time announcement pointing at something newly added, shown in place next to the feature and dismissed for good once acknowledged.

Documentation opened beside the task rather than over it, keeping the form usable while the explanation is read and staying open across steps.

A link or button that shows more when a reader shows interest in it, by hovering, focusing or long pressing, with no click and no script deciding what interest means.

A full screen placed between two steps of a flow, carrying a message, an advert, or a warning that the reader must pass through to continue.

A button that names the element it acts on and what to do to it, in markup, so opening a dialog or toggling a popover needs no script at all.

A compact view of the basket opened from the cart icon, confirming what was just added and offering checkout without leaving the current page.

A short sequence of pointers layered over a live interface, each naming one control, advanced by the reader and skippable at any point.

Opening a summary of an item over the list it came from, so the reader can inspect it and return without losing scroll position or filters.

Closing a transient surface by clicking outside it or pressing Escape, without a dedicated close control being used.

Freezing the page behind an open overlay so a wheel or swipe moves the overlay's own content and never the document underneath.

The slide-up-over transition that puts a sheet or dialog in front of the current screen while what is behind recedes, the platform motion for entering a modal context.

Scaling or fading a panel out of the control that opened it by putting its transform origin on that anchor, so the panel reads as belonging to its trigger.

A translucent or gradient layer laid over imagery or behind a dialog, dimming what is beneath so text on top clears contrast or so focus moves forward.

A constraint that keeps keyboard focus cycling inside one region until that region is dismissed.

A hint on a trigger that says something will open and what kind of thing it will be, a menu, a listbox, a dialog, before the reader commits to pressing it.

The three conditions content revealed on hover or focus must meet: reachable with the pointer, dismissible without moving focus, and not self-closing.

A state that removes a subtree from focus order, hit testing, and the accessibility tree at once, used to seal the background behind a dialog.

Where focus lands when a view, dialog, or page first appears, chosen deliberately rather than left on the body or dumped on the first close button.