# AlertDialogRoot

> Root of a composed alert dialog; owns the open state and the focus return.

Source: https://ui.jcsoftdev.com/docs/components/alert-dialog-root

Root of a composed alert dialog; owns the open state and the focus return.

## Import

```ts
import { AlertDialogRoot } from "@jcsoftdev/ui/overlays";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/overlays/alert-dialog`.

## Usage

```tsx
<AlertDialogRoot
  trigger={<Button variant="danger">Delete appointment</Button>}
  title="Delete this appointment?"
  description="Marco Salazar will be notified and the slot becomes free."
  confirmLabel="Delete"
  tone="danger"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` |  |  |
| `defaultOpen` | `boolean` | `false` |  |
| `onOpenChange` | `((open: boolean) => void)` |  |  |
| `children` | `ReactNode` |  | `AlertDialog.Trigger` and `AlertDialog.Content`. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/overlays-alertdialog--default)
- [Escape Cancels](/storybook/?path=/story/overlays-alertdialog--escape-cancels)
- [Outside Press Does Nothing](/storybook/?path=/story/overlays-alertdialog--outside-press-does-nothing)
- [Confirm Runs Once And Closes](/storybook/?path=/story/overlays-alertdialog--confirm-runs-once-and-closes)
- [Pending Blocks Every Way Out](/storybook/?path=/story/overlays-alertdialog--pending-blocks-every-way-out)
- [Returned Failure Keeps It Open](/storybook/?path=/story/overlays-alertdialog--returned-failure-keeps-it-open)
- [Thrown Failure Shows Generic Message](/storybook/?path=/story/overlays-alertdialog--thrown-failure-shows-generic-message)
- [Focus On Confirm](/storybook/?path=/story/overlays-alertdialog--focus-on-confirm)
- [Controlled](/storybook/?path=/story/overlays-alertdialog--controlled)
- [In Spanish](/storybook/?path=/story/overlays-alertdialog--in-spanish)
- [Confirm Disabled](/storybook/?path=/story/overlays-alertdialog--confirm-disabled)
- [Cancel Disabled](/storybook/?path=/story/overlays-alertdialog--cancel-disabled)
- [Composed](/storybook/?path=/story/overlays-alertdialog--composed)
- [Composed Escape And Outside](/storybook/?path=/story/overlays-alertdialog--composed-escape-and-outside)
- [Composed Action Can Keep It Open](/storybook/?path=/story/overlays-alertdialog--composed-action-can-keep-it-open)

## Source

`packages/ui/src/overlays/alert-dialog/alert-dialog.tsx`