# AlertDialog

A modal that asks the user to confirm a destructive action. Same look as Dialog but narrower, with no corner close. Focus starts on Cancel, and a scrim click does not close it.

## Cách dùng

### Khi nào dùng

- Confirm an action that destroys data or can't be undone, such as deleting a project.
- Guard a destructive action against a stray key press or click: focus starts on Cancel, and a scrim click doesn't close the dialog.

### Khi nào không dùng

- Forms, non-destructive choices, or confirming an action that destroys no data and can be undone. Use Dialog.
- A status that asks for no decision, such as a failed build. Use Badge.

## Ví dụ

### Delete project

```tsx
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive-soft">Delete project</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete project?</AlertDialogTitle>
      <AlertDialogDescription>This removes the project and all its files for everyone on your team. You can't undo it.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete project</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## Nên và không nên

### Nên

- Use it only to confirm an action that destroys data or can't be undone.
- Write the title as the question and the action button as the verb plus the object ("Delete project").
- Say in the description what is lost and for whom.
- Keep Cancel first in the footer markup; the footer puts it left on desktop and at the bottom on mobile.

### Không nên

- Don't label the action "Continue", "OK" or "Yes".
- Don't add a corner close or close on a scrim click.
- Don't move initial focus to the action button.
- Don't use it for forms or non-destructive choices; use Dialog.
- Don't leave out AlertDialogDescription.

## Props

| Tên | Kiểu | Giá trị | Mặc định | Mô tả |
| --- | --- | --- | --- | --- |
| `open` | `boolean` |  |  | Set on AlertDialog. Whether the dialog is open, when you control it. Pair it with onOpenChange. |
| `defaultOpen` | `boolean` |  | `false` | Set on AlertDialog. Opens the dialog on first render, when you don't control it. |
| `onOpenChange` | `function` |  |  | Set on AlertDialog. Called with true or false when the dialog opens or closes (trigger, Cancel, Action, Escape). Close it yourself after an async action by controlling open. |

### Slot

| Tên | Bắt buộc | Mô tả |
| --- | --- | --- |
| `trigger` | không | Element that opens the dialog. |
| `title` | có | The question, required for a11y. |
| `description` | có | What happens if the user confirms. Required. |
| `cancel` | có | AlertDialogCancel: closes only. Secondary button by default. |
| `action` | có | AlertDialogAction: closes and runs the destructive action. Destructive button by default, labeled with the action. |

## Cấu tạo

| Phần | Mô tả |
| --- | --- |
| `root` | Root. Controls open state. |
| `overlay` | Scrim behind the content. color-overlay-scrim. Clicking it does nothing. |
| `content` | The floating panel: Dialog's panel, at most max-w-md wide. |
| `header` | Title and description, left-aligned. No icon in v1. |
| `title` | Accessible name. States the question ("Delete project?"). |
| `description` | Required. Says what will happen and that it can't be undone. |
| `footer` | Cancel (secondary) then the action (destructive). Cancel sits left on desktop and at the bottom on mobile. |

## Khả năng truy cập

Role: `alertdialog`

| Phím | Hành động |
| --- | --- |
| `Escape` | Cancels: closes the dialog and returns focus to the trigger. |
| `Tab` | Cycles focus inside the dialog (focus trap). |
| `Enter / Space` | Activates the focused button. Cancel has focus when the dialog opens. |

- role="alertdialog", named by AlertDialogTitle (aria-labelledby) and described by AlertDialogDescription (aria-describedby). Both are required.
- Traps focus and hides the rest of the page from assistive tech (aria-hidden on siblings), same as Dialog.
- Focus moves to AlertDialogCancel on open, so a stray Enter doesn't destroy anything.
- No corner close and no close on a scrim click. Cancel and Escape are the only ways out besides the action.
- Focus returns to the trigger on close.

## Cài đặt

```bash
npx shadcn add https://werewolf-ui.vercel.app/r/alert-dialog.json
```

Lệnh này thêm luôn `styles/werewolf.css`, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau `@import "tailwindcss"`, với đường dẫn tính từ file CSS đó (từ `app/globals.css` là `@import "../styles/werewolf.css"`).