Components / Overlays

Dialog native

A centred modal over the surface, opened by its trigger slot or by binding open.

A2UI basic
Modal
Children
many
Loading the renderer…
Dialog rendered by the React renderer on Web
Web React
Dialog rendered by the SwiftUI renderer on iOS
iOS SwiftUI
Dialog rendered by the Compose renderer on Android
Android Compose
Dialog rendered by the gpui renderer on Desktop
Desktop gpui

View exponential-ui-dialog, painted by each native renderer.

PropTypeDefaultDescription
titlestring–The dialog heading.
descriptionstring–A muted line under the heading.
openbindbooleanfalseWhether it shows; bind it to a boolean path.
dismissiblebooleantrueCloses on the backdrop or Escape.
NameKind
on.changeevent: runs an action
triggerslot: one component by id
footerslot: one component by id
Role
dialog
Semantics
dialog (modal)
KeysAction
–Opening moves focus to the first focusable child (else the dialog)
–Tab cycles inside the dialog (focus trap)
Escapeclose when dismissible
–Closing returns focus to the trigger
Recipe parts
Dialog/overlayDialog/contentDialog/titleDialog/descriptionDialog/footerDialog/close
Keyed by
dismissible:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

Dialog

The centred modal: a radius-16 card on the OPAQUE card fill under a card hairline, a semibold title, one line of body, and a footer whose LAST button is the primary.

More

Cancel is borderless — two boxed buttons side by side ask the reader to choose between two equals. On a phone the same component drops to the bottom sheet arm. A confirm or a choice is never this shell: it is the Prompt (EXP-1215). Hand-written here because a closed Radix portal renders nothing at all statically (PORTAL_ONLY_IDS).

Webok
Dialog / DialogContentpackages/ui/src/dialog.tsx

a confirm or a choice is the Prompt entry (EXP-1215), never this shell

iOSn/a

no shared shell: a confirm is GlassAlert (the Prompt entry), a content dialog is the sheet

Androidn/a

same: a confirm is GlassAlert (the Prompt entry), a content dialog is GlassSheet

Desktopok
native_dialog::DialogShellapps/desktop/crates/ui/src/native_dialog.rs

EXP-284: every IDE dialog is a real OS window, not an in-window overlay

Prompt

THE confirm and choice prompt (EXP-1215): every "Delete X?", merge confirm and multi-answer choice on the web is this one card, the same on every width, its wording read from the contract fixture `prompts.json` (web mirror `apps/web/src/lib/prompts.ts`, the same strings on iOS and Android).

More

A centred card over the dimmed scrim, no ✕ (scrim tap and Esc are its cancel path); ONE question as the title; a body line only for a fact the title cannot carry (what is deleted, a name, a count, a consequence for other people), never a restatement of the buttons; an optional content slot between the text and the row (the blocked-start graph, an input); ONE row of the 32px `md` Pill capsules; only when that row cannot fit do the pills stack, one per line at their own width, trailing-aligned, in reverse display order: the default on top, Cancel below it, a quiet destructive answer last (iOS `GlassAlertLayout.stacked`); never a two-row hybrid. Roles: `cancel` = the plain pill that only dismisses; `primary` = the safe/expected answer, the accent pill at the trailing edge; `default` = a plain pill that does something; `destructive` = the answer of a plain "Delete X?" confirm, the plain pill with a destructive label and tinted border next to Cancel (no primary, Cancel takes focus); `quietDestructive` = destructive TEXT set apart on the leading edge when a safe primary exists too. No solid red blocks, no full-width buttons; initial focus and Enter never land on a destructive answer; a busy answer keeps its label and shows the pill's spinner while the row and the dismiss paths lock. The natives draw the same card (GlassAlert); the IDE asks in native alert windows with the same words, roles and focus (EXP-1230, `AlertSpec::from_prompt`).

Webok
Prompt / PromptLayoutpackages/ui/src/prompt.tsx
Desktopok
native_dialog::AlertSpec::from_promptapps/desktop/crates/ui/src/native_dialog.rs

EXP-1230: the fixture's words, roles and focus (domain prompts.rs) in a native alert window