Designpedia
All terms
Overlays & Surfaces

Overlay

also known as overlay layer

An overlay is the umbrella term for anything that appears above the normal page, temporarily covering part or all of it. Modals, popovers, tooltips, drawers, and toasts are all types of overlays. The term describes the layering behavior, not a specific component.

Don't confuse it with
An overlay is the general category of on-top layers. A scrim is specifically the dimming layer behind an overlay. A modal is one kind of overlay that blocks interaction; a popup is a loose word for small overlays.
In the wild
The dimmed layer plus dialog you see when deleting a file in Gmail is an overlay.
Tags
Sources