Studio
Studio/Kits
New kit
Canonical inventory
Overlays · core

Dialog

overlay.dialog

A modal dialog places a focused decision above the interface and makes the background temporarily unavailable.

dialogthe popup that blocks the pagemodal windowblocking dialogthe dark layer behind a popupscrim or backdrop
States4
Touch target44px
Evidence8
Introduced by8 kits
Visual specimen

Same contract. Every kit voice.

MAVAN renderingopen
Translation table

What code calls it.

Web<dialog>The closest native or standardized web primitive.direct
ARIAdialogThe primary accessibility role or state pattern.direct
SwiftUI.sheet or .fullScreenCoverThe nearest named SwiftUI API.direct
AppKitNSWindow or NSPanelThe nearest named AppKit API.direct
Anatomy

Every part, named.

  1. 1Trigger
  2. 2Scrim or backdrop
  3. 3Dialog surface
  4. 4Title and description
  5. 5Primary and secondary actions
  6. 6Focus trap and return target
Often confused with

Similar shape. Different contract.

Bottom sheetoverlay.bottom-sheet

Shares a visual family, but has a different role, state model, or interaction contract.

Action sheetoverlay.action-sheet

Shares a visual family, but has a different role, state model, or interaction contract.

Navigation drawernavigation.drawer

Can look similar in context, but belongs to a different semantic and behavioral family.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Dialog component (overlay.dialog). A modal dialog places a focused decision above the interface and makes the background temporarily unavailable. Support these states: closed, open, busy, error. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion, focus-containment, focus-return. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.
Studio contract

What must be proven.

Required states

closed · open · busy · error

Required evidence

implementation · state-matrix · responsive · keyboard · touch · reduced-motion · focus-containment · focus-return

Source union

mavan · jade · lumen · aurora · cabana · purple-rain · spatial · margin