Overlays / The visual dictionary

Dialog.

A separate surface for a focused task or decision.

Also calledmodal dialogmodal window
01

See it in context

UI illustration
Try the native interaction
▧

Name your collection

Choose a clear name for this new collection.

A dialog temporarily separates a task from the main interface. A modal dialog prevents interaction outside it until dismissal; its title, focus behavior, and close path must be clear.

When to use it

Use for a short task that needs focused attention.

Know the difference

Dialog names the surface; modal describes whether the rest of the interface is unavailable.

WebiOSiPadOSAndroidmacOSWindowsLinuxvisionOS

iOS · iPadOS · macOS · visionOS

Use the native platform presentation and terminology; adapt density and interaction to touch, pointer, remote, or spatial input rather than copying a phone-sized view.

Web · Android · Windows · Linux

On the web, manage keyboard focus and dismissal explicitly. Android and desktop implementations should use the equivalent native surface when available.

Primary documentation for the pattern and its platform conventions.