# Confirm

> A convenience wrapper composing a two-control confirmation prompt in one call: an AlertDialog panel prefilled with a heading, an optional supporting passage, and a cancel/confirm control pair, so a single consequential decision needs no compound assembly of its own.

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

Composes AlertDialog into a confirmation prompt, wiring title and
description ids to `aria-labelledby`/`aria-describedby`. Omit
Confirm.Props.form to close on confirm, or pass it to submit a real `<form>` instead.

## Examples

```tsx
<Button commandfor="confirm-delete" command="show-modal" color="danger">{t("project.delete")}</Button>
<Confirm
	id="confirm-delete"
	title={t("project.deleteTitle")}
	description={t("project.deleteDescription")}
	confirmLabel={t("actions.delete")}
	cancelLabel={t("actions.cancel")}
/>
```

```tsx
<Confirm
	id="publish-post"
	title={t("post.publishTitle")}
	confirmLabel={t("actions.publish")}
	cancelLabel={t("actions.cancel")}
	color="brand"
/>
```

```tsx
<Confirm
	id="revoke-session"
	title={t("session.revokeTitle")}
	confirmLabel={t("actions.revoke")}
	cancelLabel={t("actions.cancel")}
	form={{ action: revokeUrl, fields: <input type="hidden" name="csrf" value={token} /> }}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | Stable identifier the panel renders as its own `id`; a trigger elsewhere on the page targets it via `commandfor`/`command="show-modal"`, and the cancel and confirm controls point back at it automatically. |
| `title` | `RemixNode` | The panel's heading, rendered through AlertDialog.Title. |
| `description?` | `RemixNode` | Supporting copy rendered through AlertDialog.Description beneath the title. Omit to render no description. |
| `confirmLabel` | `RemixNode` | Label for the confirming control, rendered through AlertDialog.Action. |
| `cancelLabel` | `RemixNode` | Label for the control that backs out without confirming, rendered through AlertDialog.Cancel. |
| `color?` | `Button.Color` | Semantic color for the confirming control. Defaults to DEFAULT_COLOR. |
| `form?` | `FormProps` | Submission the confirming control performs. Omitting it leaves confirming as a close-only action for the page to react to; setting it submits a real form instead. |
| `parts?` | `PartsProps` | Per-part styling for this wrapper's internally composed elements. |

Also accepts everything in `Omit<AlertDialog.Props, "id" | "children" | "title">`.