# AlertDialog

> An interruptive modal surface that demands an explicit response before a page continues — confirming a destructive action, surfacing a blocking error — built on the native `<dialog>` host of Dialog, widened for its two-button layout and sealed against light dismiss.

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

Renders the alert panel through Dialog, widened to fit a two-button
footer, with `role` fixed to `"alertdialog"` and `closedby` to
`"closerequest"` so the interruption clears through an explicit response.

## Examples

```tsx
<Button commandfor="delete-project" command="show-modal" color="danger">{t("project.delete")}</Button>
<AlertDialog id="delete-project" aria-labelledby="delete-project-title">
	<AlertDialog.Header>
		<AlertDialog.Title id="delete-project-title">{t("project.deleteTitle")}</AlertDialog.Title>
		<AlertDialog.Description>{t("project.deleteDescription")}</AlertDialog.Description>
	</AlertDialog.Header>
	<AlertDialog.Footer>
		<AlertDialog.Cancel commandfor="delete-project">{t("actions.cancel")}</AlertDialog.Cancel>
		<AlertDialog.Action commandfor="delete-project">{t("actions.delete")}</AlertDialog.Action>
	</AlertDialog.Footer>
</AlertDialog>
```

## Props

Also accepts everything in `Omit<Dialog.Props, "role" | "closedby" | "closedBy">`.


### AlertDialog.Header

Renders AlertDialog.HeaderProps.children as the panel's header slot: a column stacking AlertDialog.Title and AlertDialog.Description with a small gap between them.

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


### AlertDialog.Title

Renders AlertDialog.TitleProps.children as the panel's heading, inside the native heading element matching the nearest ancestor `HeadingScope`'s depth, or `<h1>` where no scope wraps it.

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


### AlertDialog.Description

Renders AlertDialog.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 AlertDialog.Title.

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


### AlertDialog.Footer

Renders AlertDialog.FooterProps.children as an end-aligned action row.

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


### AlertDialog.Action

Renders the panel's emphasized action as a danger-toned Button, typed `"button"` so its `command="close"` reaches the AlertDialog named by `commandfor`; `type="submit"` submits the enclosing form instead.

| Prop | Type | Description |
| --- | --- | --- |
| `commandfor?` | `string` | `id` of the ancestor AlertDialog this action dismisses. Required for the default `type="button"` action; a `type="submit"` action ends the interruption by submitting its enclosing form. |
| `command?` | `"close"` | Invoker Commands verb dispatched to the target AlertDialog. Defaults to `"close"`, and is dropped for a `"submit"` or `"reset"` action, which the platform drives as a form control instead of an invoker. |

Also accepts everything in `Omit<Button.Props, "commandfor" | "command">`.


### AlertDialog.Cancel

Renders the panel's dismiss control as an outline, neutral Button with `type` fixed to `"button"`, so its `command="close"` reaches the AlertDialog named by `commandfor` from inside a `<form>` too.

| Prop | Type | Description |
| --- | --- | --- |
| `commandfor` | `string` | `id` of the ancestor AlertDialog this cancel control dismisses. |
| `command?` | `"close"` | Invoker Commands verb dispatched to the target AlertDialog. Defaults to `"close"`. |
| `type?` | `"button"` | Narrowed to the only value a cancel control carries, and always rendered, since the platform runs its close command only from a button typed `"button"`, including inside a `<form>`. |

Also accepts everything in `Omit<Button.Props, "commandfor" | "command" | "type">`.