Pages, overlays and drawers

An overlay is the default for a task that acts on the view behind it. The reader keeps the chart, time range and filters they were looking at, does one thing, and closes it. Most short tasks belong there.

This page says when that is the wrong answer.

When an overlay becomes a page

An overlay becomes a page when any one of these is true.

It contains a menu or a sidebar. Tabs, a side navigation, or anything else the reader moves between. A surface the reader navigates within is a page, whatever it is rendered as.

Another overlay opens on top of it. Layers stack badly: the reader loses track of what closing one dismisses, and the overlay underneath cannot be read while the one above is open.

Its content scrolls. An overlay is sized to hold its content. A form that does not fit has outgrown the surface, and scrolling it inside a fixed panel hides both the fields above and the buttons below.

Examples that meet one of these today: creating a trigger, the check-in monitor form, the chart builder, and search. Each one carries its own navigation inside the overlay.

What stays an overlay

A task that acts on the view behind it and finishes in one pass. Duplicating a chart, renaming a saved view, adding a marker, changing table settings, exporting a dashboard.

The field count is not the test. A form with several fields is fine in an overlay as long as it fits and opens no second layer.

Confirming an action

Use a confirm dialog, not an overlay, when the reader is only being asked whether to proceed. A surface with no fields and two buttons is a confirm.

Drawers

Use a drawer when the reader needs to see the background while they work — inspecting items one at a time against the list they came from. The background stays visible and interactive, which is the difference from an overlay.

Closing an overlay with unsaved input

An overlay that holds a form must ask before discarding it. A reader who clicks the background or presses Escape loses everything they typed otherwise, and neither action reads as "discard this".

Applying this

New work follows the rule. Existing overlays are not migrated on a schedule — they move when something else brings you into that screen.