# AlertDialogContent

> The panel: `role="alertdialog"`, no close button, outside presses ignored, focus on Cancel.

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

The panel: `role="alertdialog"`, no close button, outside presses ignored, focus on Cancel.

## Import

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

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

## Usage

```tsx
<AlertDialogContent
  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 |
| --- | --- | --- | --- |
| `children` | `ReactNode` |  |  |
| `material` | `"solid" \| "glass" \| "glass-clear" \| "liquid" \| "liquid-clear"` |  |  |
| `container` | `HTMLElement \| null` |  |  |
| `className` | `string` |  |  |
| `classNames` | `Partial<Record<AlertDialogPart, string>>` |  | Per-part classes: `overlay` and `root` apply here. |

`*` 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`