Dialog

Docked windows only: shows the window full screen — the dialog gutter on every side, over a scrim. Escape, the full screen button and (in a `DialogDock`) a click on the scrim restore it. Bindable in Svelte.

Docked windows only: folds the window to its title bar. The body and footer stay mounted (a half-filled form keeps its state). Clicking the title bar, or the minimize button, toggles it. Bindable in Svelte.

Controls the open/closed state of the dialog. Bindable in Svelte. Optional: every framework defaults it to `false`, which is why React, Vue and Astro each had to `Omit<…, "open">` and re-declare it optional. Svelte consumed the base type directly and so inherited a `required` it never meant — `<Dialog>` with no `open` is the ordinary uncontrolled case.

Background style of the dialog panel. surface: default surface; sunken: recessed; elevated: raised with shadow; transparent: no background.

Box-shadow border style of the dialog panel. none: no border; default: standard border; bold: stronger emphasis; muted: subtle separation.

The Card the dialog renders its content in (header with the title and close button, body, optional footer). Card surface props that belong to the `<dialog>` (background/border/shadow/radius) and the heading/subheading (use `title` / `subtitle`) are not accepted. Set `contentBackground` for a shell-and-inset look. `false` renders the legacy bare wrapper instead. Popovers (`data-popover`) are bare unless a `card` object is passed.

Border radius of the dialog panel. Automatically set to none on the attached edge for drawer dialogs.

Border radius for bottom-left and bottom-right corners.

Border radius for top-left and bottom-left corners.

Border radius for top-right and bottom-right corners.

Border radius for top-left and top-right corners.

Elevation shadow of the dialog panel. Dialogs float above the page, so they carry a shadow by default; pass "none" to flatten it.

Whether to show the close button in the header.

Docked windows only: whether the header shows the full screen button.

Docked windows only: whether the header shows the minimize button.

Semantic tone color scheme applied to the dialog panel.

Apply a frosted glass effect with backdrop blur to the dialog panel.

Opens the dialog as a docked window: non-modal (the page stays usable, no backdrop, no scroll lock), pinned to a screen corner with the dialog gutter around it, with minimize and full screen buttons beside the close button. Inside a `DialogDock` it takes the dock's corner and sits in its row; on its own it pins itself to the bottom-end corner. Ignored on a drawer and a popover; `fullscreen` and `size="viewport"` are ignored on it (use `maximized`).

Positions the dialog along an edge of the screen. Automatically removes the border radius on the attached edge unless overridden.

Fills the viewport: full width, `100dvh` height (tracks mobile browser chrome), no margin and no corner radius. `true` applies at every width; a breakpoint (`"sm"` | `"md"` | `"lg"`) applies only below it — e.g. `fullscreen="sm"` is a full-screen sheet on phones and a regular dialog on larger screens. Combines with `drawer`: the drawer's slide animation is kept, its size and inset are replaced.

Internal padding of the dialog panel.

Size preset. `"sm"` (400px), `"md"` (540px), `"lg"` (720px) and `"xl"` (960px) set the width, never wider than the viewport minus a gutter on each side (16px on phones, 24px from 768px up). `"viewport"` covers almost the whole screen — that gutter on every side, the backdrop still visible around it, its own corner radius — with a fixed height the body fills (a child with `flex: 1` or `height: 100%` stretches; the body scrolls, the header and footer stay). `fullscreen` wins below its breakpoint: `size="viewport" fullscreen="sm"` is full screen on phones and a near-full-viewport dialog above. A left/right `drawer` takes the width of `sm`/`lg`/`xl`; on a top/bottom drawer (already full width), and `"viewport"` on any drawer, the size is ignored with a dev warning. Popovers ignore it.

Custom mousedown handler. When provided, replaces the default backdrop-click-to-close behavior. Used by Popover to also check the trigger element.

When true, this dialog does not participate in the dialog stack. Useful for popovers and non-blocking overlays. Auto-detected for popovers.

When true, opens as a modal dialog using showModal() — blocks interaction with the rest of the page and enables the backdrop.

When true, prevents body scroll while the dialog is open. Uses a counter to handle stacked dialogs correctly.

Callback called when the dialog closes.

Called when the full screen button, Escape or the dock's scrim changes the full screen state.

Called when the minimize button or the title bar folds or restores the window.

Callback called when the dialog opens.

Callback called when the dialog open state changes.

Accessible label of the header close button (its `aria-label`). Override it to localize the dialog. `passThrough.closeButton.props["aria-label"]` and `closeButtonProps["aria-label"]` still take precedence.

Docked windows only: the accessible labels of the minimize and full screen buttons.

The dialog body content.

Props to customize the close button (merged with defaults).

Footer body, rendered in the card footer (wins over `card.footer.children`).

Footer leading flank (after `card.footer.leading`).

Footer trailing flank (after `card.footer.trailing`) — the usual home of the dialog's actions.

Replaces the header's Banner (title/subtitle) with custom content while keeping the header row's styling and the close button. Renders the header even when no `title`/`subtitle` is set. Used to embed an input (e.g. a command palette's search field) in the header.

Forwarded to Banner's heading `leading` slot (inline, left of the title).

Forwarded to Banner's heading `trailing` slot (inline, right of the title).

Forwarded to Banner's `leading` slot (far-left of the header row, outside heading/subheading).

Content rendered inside the <dialog> but OUTSIDE the panel wrapper — e.g. a popover's arrow.

Forwarded to Banner's subheading `leading` slot.

Forwarded to Banner's subheading `trailing` slot.

Secondary text displayed below the title. Renders the subheading row, which also accepts subheading-leading and subheading-trailing slots. The rendered subtitle becomes the dialog's `aria-describedby` unless you set one yourself.

Text displayed in the dialog header. When provided, the header is rendered with the title, close button, and any heading or subheading slots. The rendered title also names the dialog: the root gets `aria-labelledby` pointing at it unless you set `aria-label` / `aria-labelledby` yourself.

Forwarded to Banner's `trailing` slot (far-right of the header row, before the close button).

Render-prop trigger: receives the trigger props bag to spread onto a consumer-owned element that opens the dialog.

passThrough forwarded to the internal Banner.

Bindable reference to the native <dialog> element.

Reports the live headless controller once mounted (Popover uses this).

Per-slot style and attribute override bag for dialog-owned slots. `style` applies Panda CSS to a slot; `props` forwards arbitrary HTML attributes. In the card frame, `wrapper` addresses the Card root, `content` the card content and `header` the card header Banner.

Astro / vanilla: serialize the props into `data-dialog-config` so the client runtime hydrates this instance with them and `getPindoba(el, "dialog")` can `update()` it. Without it Astro still hydrates the dialog's behaviour (open state, dismissal, close button) and leaves its markup as rendered. Frameworks with their own reactivity don't need it.

Bindable reference to the rendered trigger element (used as the popover anchor by composing components).