Modal Windows

Focused overlays for a single decision or task.

A modal window is an overlay that traps focus on one task, dimming the page behind it. Modals are used when a decision must be made before continuing, or when a short flow benefits from context isolation.

Use cases

Confirming destructive actions like delete or cancel
Short forms such as invite, share, or quick edit
Contextual detail for a list row without a full page navigation

Pros

Keeps users in place, preserving context on the underlying page
Forces attention on a single, focused decision
Cheap to open and dismiss compared to a full route change

Cons

Poor for long flows; scrolling inside a modal feels cramped
Hard to deep-link and share; state lives outside the URL
Accessibility is easy to get wrong (focus trap, ESC, ARIA)

Where it fits in the funnel

This pattern most often shows up at these Studio stages:

OnboardingCore loopMonetization

Try it in the Studio

See how modal windows plays out across real industries. Compose a product genome and watch it render live.

Open the Studio