# AlertDialog

> An interruptive dialog that asks the user to confirm or cancel an important action.

Category: Overlays · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/alert-dialog

AlertDialog is for decisions with consequences, such as deleting a template or revoking access. Unlike Dialog it cannot be dismissed by clicking outside, it has no close icon, and focus starts on the least destructive option. For the common confirm/cancel case with async handling, use ConfirmationDialog.

## Import

```tsx
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogBody, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Destructive action

```tsx
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from '@bindshq/stance-react';

export function Destructive() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="danger">Delete template</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete “Sales, EMEA”?</AlertDialogTitle>
          <AlertDialogDescription>
            32 people use this signature. They will fall back to your organisation default.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel asChild>
            <Button variant="outline">Cancel</Button>
          </AlertDialogCancel>
          <AlertDialogAction asChild>
            <Button variant="danger">Delete template</Button>
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
```

### Non-destructive decision

```tsx
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from '@bindshq/stance-react';

export function NonDestructive() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button>Publish changes</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Publish to all mailboxes?</AlertDialogTitle>
          <AlertDialogDescription>
            Your updated signature will reach 128 people on the next sync.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel asChild>
            <Button variant="outline">Not yet</Button>
          </AlertDialogCancel>
          <AlertDialogAction asChild>
            <Button>Publish</Button>
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
```

### With details

Use the body for consequences the user should weigh.

```tsx
import { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from '@bindshq/stance-react';

export function WithDetails() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Disconnect Azure</Button>
      </AlertDialogTrigger>
      <AlertDialogContent size="md">
        <AlertDialogHeader>
          <AlertDialogTitle>Disconnect Azure AD?</AlertDialogTitle>
          <AlertDialogDescription>Directory sync stops immediately.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogBody>
          <ul style={{ margin: 0, paddingLeft: 20 }}>
            <li>New starters will no longer receive signatures automatically.</li>
            <li>Existing signatures stay in place until changed.</li>
            <li>You can reconnect at any time from Integrations.</li>
          </ul>
        </AlertDialogBody>
        <AlertDialogFooter>
          <AlertDialogCancel asChild>
            <Button variant="outline">Keep connected</Button>
          </AlertDialogCancel>
          <AlertDialogAction asChild>
            <Button variant="danger">Disconnect</Button>
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| AlertDialog | `open / defaultOpen / onOpenChange` | `boolean / boolean / (open: boolean) => void` | None | Same as Dialog. |
| AlertDialogTrigger | `asChild` | `boolean` | `false` | Render your own Button as the trigger. |
| AlertDialogContent | `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'sm'` | Maximum width. |
| AlertDialogContent | `initialFocus` | `RefObject<HTMLElement>` | None | Override the default focus on AlertDialogCancel. |
| AlertDialogContent | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | None | Call preventDefault() to block Escape (e.g. while saving). |
| AlertDialogTitle | `level` | `1 \| 2 \| 3 \| 4` | `2` | Heading level; the accessible name. |
| AlertDialogDescription | `...props` | `HTMLAttributes<HTMLParagraphElement>` | None | Linked via aria-describedby. |
| AlertDialogAction | `asChild` | `boolean` | `false` | Confirms and closes. Call event.preventDefault() in onClick to keep it open. |
| AlertDialogCancel | `asChild` | `boolean` | `false` | Cancels and closes; receives initial focus. |

## Accessibility

- Uses role="alertdialog" with aria-modal, named by the title and described by the description.
- Initial focus is on Cancel so an accidental Enter never triggers the destructive action.
- Outside clicks do not dismiss; Escape cancels.
- Focus is trapped and returns to the trigger on close.

## Keyboard

| Keys | Action |
| --- | --- |
| `Tab` | Moves between Cancel and the action. |
| `Enter` `Space` | Activates the focused button. |
| `Esc` | Cancels and closes. |

## Guidelines

**Do**

- Phrase the title as a question naming the object: “Delete ‘Sales signature’?”
- Label the action with the verb, not “OK”.

**Don’t**

- Use for information-only messages.
- Stack alert dialogs or show them on page load.

## Related

- https://stanceui.com/components/confirmation-dialog
- https://stanceui.com/components/dialog