# Dialog

> A modal surface built on the native `<dialog>` element, opened and closed declaratively through Invoker Commands (`commandfor`/`command`) instead of a JavaScript-tracked open state.

```ts
import { Dialog } from "@sdxc/ui";
```

Renders the dialog panel as a native `<dialog>` host, its `::backdrop`
tinted and, where supported, blurred to dim the page behind it. The panel
declares the `ui-dialog` named container so Dialog.Header and Dialog.Footer can size against the panel's own width; Invoker Commands open and close it declaratively — a trigger elsewhere points `commandfor` at this element's `id` with `command="show-modal"`, and any control inside, including Dialog.Close, points `commandfor` at that same `id` with `command="close"`.

## Examples

```tsx
<Button commandfor="confirm-delete" command="show-modal">{t("project.delete")}</Button>
<Dialog id="confirm-delete" aria-labelledby="confirm-delete-title">
	<Dialog.Header>
		<Dialog.Title id="confirm-delete-title">{t("project.deleteTitle")}</Dialog.Title>
		<Dialog.Description>{t("project.deleteDescription")}</Dialog.Description>
	</Dialog.Header>
	<Dialog.Footer>
		<Button commandfor="confirm-delete" command="close" color="danger">{t("actions.delete")}</Button>
	</Dialog.Footer>
	<Dialog.Close commandfor="confirm-delete" aria-label={t("actions.close")} />
</Dialog>
```

```tsx
<Dialog id="welcome" mix={zoom({ duration: durations.normal })}>
	<Dialog.Header>
		<Dialog.Title>{t("welcome.title")}</Dialog.Title>
	</Dialog.Header>
</Dialog>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The panel's compound parts: Dialog.Header, Dialog.Footer, Dialog.Close, or any other content. |

Also accepts everything in `TagProps<"dialog">`.


### Dialog.Header

Renders Dialog.HeaderProps.children as the panel's header slot: a column stacking Dialog.Title and Dialog.Description, centered while narrow and start-aligned (flipping under `dir="rtl"`) once the panel's own `ui-dialog` container grows past `40rem`.

Also accepts everything in `TagProps<"div">`.


### Dialog.Title

Renders Dialog.TitleProps.children as the panel's heading, inside the native heading element matching the nearest ambient heading level — `<h1>` by default — sized and weighted as the panel's most prominent line of text at every level.

Also accepts everything in `TagProps<"h1">`.


### Dialog.Description

Renders Dialog.DescriptionProps.children as the panel's supporting copy, in a native `<p>` set to the panel's muted foreground color so it reads as secondary to Dialog.Title.

Also accepts everything in `TagProps<"p">`.


### Dialog.Footer

Renders Dialog.FooterProps.children as the panel's action row: a column of stacked, full-width controls while the panel is narrow, switching to a single end-aligned row past the panel's own `40rem` container mark.

Also accepts everything in `TagProps<"div">`.


### Dialog.Close

Renders a dismiss control for the ancestor Dialog named by `commandfor`: a small, ghost-styled Button with a fixed "X" glyph, pinned to the panel's corner.

| Prop | Type | Description |
| --- | --- | --- |
| `commandfor` | `string` | `id` of the ancestor Dialog this button dismisses. |
| `command?` | `"close"` | Invoker Commands verb dispatched to the target Dialog. Defaults to `"close"`. |
| `"aria-label"` | `string` | Accessible label for the icon-only control — required, since the button carries no visible text for assistive technology to read. |

Also accepts everything in `Omit<
		Button.Props,
		"children" | "variant" | "color" | "size" | "aria-label" | "commandfor" | "command"
	>`.