Dialog

Dialog interrupts the page with a teleported modal for confirmations, settings, or destructive choices.

Bind open to a signal your trigger and footer buttons share; set dismiss.mask_closeable to false when the user must pick an explicit action. Compose DialogSurface → DialogBody → title, content, and DialogActions — Tab stays inside the panel until you close it.

  • Confirmations, settings panels, or destructive choices that need focus and a scrim
  • Flows where keyboard users must stay inside the panel until dismissed

Prefer Popover for floating pickers or detail that should not block the page. Prefer Drawer for edge-mounted auxiliary panels.

  • Create an RwSignal<bool> (or OpenBind) shared by your trigger and dismiss handlers.
  • Wire an external Button (or link) to set open to true — there is no built-in trigger slot; parent-owned state is intentional for Leptos apps.
  • Compose DialogSurface → DialogBody → DialogTitle, DialogContent, and optional DialogActions.
  • Close from footer buttons or backdrop/Esc by setting open to false.
Basic confirmation

A modal confirmation asks the user to verify an action before continuing. Title summarizes the decision, body explains the outcome, and the footer holds a dismiss action.

Closed by default with trigger

Dialogs stay hidden until a trigger sets open to true. Bind visibility to a signal the trigger and dismiss actions both read and write.

Non-dismissible mask

When the user must choose an explicit action, disable backdrop dismiss so accidental clicks cannot close the dialog.

Escape closes

Allow Escape to dismiss routine dialogs; disable for flows that require an explicit choice.

Focus trap

Tab cycles within the dialog so keyboard users cannot accidentally tab into the obscured page behind the mask.

Theme token

Dialog surfaces inherit neutral background tokens from the Orbital theme provider.