# AlertDialog

Modal confirmation for important or destructive actions. Uses `role="alertdialog"`, a cancel action, and a confirm action that calls `onConfirm` (cancel / Escape never call `onConfirm`). The default export stays the assembled preset (`title` / `onConfirm` / `triggerLabel`). Compound parts (`AlertDialog.Root`, `AlertDialog.Trigger`, `AlertDialog.Backdrop`, `AlertDialog.Popup`, `AlertDialog.Title`, `AlertDialog.Actions`) are available for custom chrome. The trigger child must forward DOM props — there is no `render` prop.

State attributes, exit animation, and `onOpenChange` details are documented in [Overlay lifecycle](/docs/overlay-lifecycle).

## Examples

### Default

Pass `triggerLabel` for a built-in open button. Set `isDestructive` to style confirm as danger and autofocus Cancel.

```tsx
import { AlertDialog } from '@var-ui/react';

<AlertDialog
  triggerLabel="Delete"
  title="Delete item?"
  description="This cannot be undone."
  confirmLabel="Delete"
  isDestructive
  onConfirm={() => {}}
/>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Confirm pattern

Non-destructive confirms use the primary intent. Customize `cancelLabel` / `confirmLabel` to match the task.

```tsx
import { AlertDialog } from '@var-ui/react';

<AlertDialog
  triggerLabel="Publish"
  title="Publish post?"
  description="Your draft will become visible to everyone with the link."
  confirmLabel="Publish"
  cancelLabel="Keep editing"
  onConfirm={() => {}}
/>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| onConfirm | () => void | yes |  | Called when the confirm action is pressed. Never called on cancel or Escape dismissal. |
| title | string | yes |  | Dialog heading shown in the modal header. |
| cancelLabel | string \| undefined | no | Cancel | Label for the dismiss action. |
| confirmLabel | string \| undefined | no | Confirm | Label for the confirm action. |
| description | ReactNode | no |  | Supporting copy below the heading. |
| isDestructive | boolean \| undefined | no | false | Renders the confirm action with `danger` intent and autofocuses Cancel. |
| isOpen | boolean \| undefined | no |  | Controls the open state. Required when `triggerLabel` is omitted. |
| onOpenChange | OverlayOpenChangeHandler \| undefined | no |  | Called when the open state changes (including Escape/cancel dismissal). |
| portalContainer | Element \| undefined | no |  | Element the modal portals into instead of `document.body`. Needed when a subtree renders under a different theme than the page ambient (the theme's CSS custom properties only cascade to descendants of the themed element). |
| triggerLabel | string \| undefined | no |  | Label on the button that opens the modal. If omitted, use `isOpen`/`onOpenChange` to control it. |

## Accessibility

Renders as an alertdialog with a focus trap. Destructive flows autofocus Cancel so Enter does not immediately confirm. Escape and the cancel button dismiss without calling `onConfirm`. Prefer a clear `title` and short `description` that name the irreversible consequence.