# Alert Dialog

A modal that interrupts with something important and waits for an answer.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/alert-dialog
```

## Usage

```tsx
import { AlertDialog } from '@/components/fetaui/alert-dialog'
import { Button } from '@/components/fetaui/button'

export function Example() {
  return (
    <AlertDialog
      tone="destructive"
      title="Delete chat?"
      description="You can’t undo this."
      actionLabel="Delete"
      trigger={<Button variant="destructive">Delete</Button>}
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | ReactNode | required |
| actionLabel | string | required |
| description | ReactNode |  |
| tone | neutral, destructive | neutral |
| size | default, small | default |
| media | ReactNode or false |  |
| status | idle, loading, error | idle |
| cancelLabel | string | Cancel |
| loadingLabel | string |  |
| retryLabel | string | Try again |
| errorTitle | string |  |
| errorDescription | string |  |
| onAction | () => void |  |
| trigger | ReactElement |  |
| open | boolean |  |
| onOpenChange | (open) => void |  |
| animated | boolean | true |

## When to use

- For decisions that need an answer now: confirm a delete, leave without saving, grant access.
- Keep the title a question and the action a verb that matches it.

## When not to use

- For anything longer: use Sheet or a page.

## Accessibility

- role alertdialog, labelled by the title and described by the text.
- Focus starts on Cancel for Destructive and on the action otherwise.
- A scrim click does nothing for Destructive.
- The error is announced as it appears.

## Motion

- The page dims first. The dialog rises 12 px from 0.98 over 240 ms, 40 ms later, and the badge pops in.
- Leaving takes 160 ms.
- The Mobile sheet uses a 380/36 spring.
- An error shakes the dialog by 4 px.
- With reduced motion, it fades in and there is no shake.