# Alert Dialog animation (/docs/components/alert-dialog)




## What it fixes [#what-it-fixes]

A confirmation should read as the answer to the button you pressed. With Keyframery, an alert dialog grows out of the Delete button and closes back into it, so you never lose track of what you're confirming.

## Install [#install]

```bash
npx shadcn add alert-dialog
```

Nothing else, as long as `<Cuts />` is in your layout.

## Choose a cut [#choose-a-cut]

Alert dialogs follow the `dialog` menu:

```tsx
<Cuts dialog="punch-in" />
<AlertDialogContent data-cut="fade" />
```

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `dialog (on <Cuts>)` | `"rack-focus" \| "punch-in" \| "fade" \| "none"` | `"rack-focus"` | The cut for dialogs, alert dialogs and the command menu. |
| `data-cut (on AlertDialogContent)` | `"rack-focus" \| "punch-in" \| "fade" \| "none"` |  | The cut for this alert dialog. |
| `data-cut-origin (on AlertDialogContent)` | `"center"` |  | center starts from the middle. |