# Alert Dialog

```astro
---
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction } from "@/components/starwind/alert-dialog";
import { Button } from "@/components/starwind/button";
---

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Show Alert Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account and remove
        your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## Installation

```bash
npx starwind@latest add alert-dialog
```

## Usage

### General Notes 

Alert dialogs are used to interrupt the user with important information that requires a response. Alert dialogs are modal and should be used sparingly for critical actions like confirmations, warnings, or errors.

The essential components are `AlertDialog`, `AlertDialogTrigger`, and `AlertDialogContent`. The `AlertDialogAction` and `AlertDialogCancel` components provide standard button behaviors for user responses.

### Destructive Actions

Alert dialogs are commonly used to confirm destructive actions like deleting data.

```astro
---
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction } from "@/components/starwind/alert-dialog";
import { Button } from "@/components/starwind/button";
---

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="error">Delete Account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete Account</AlertDialogTitle>
      <AlertDialogDescription>
        Are you sure you want to delete your account? This action is permanent and cannot be undone.
        All your data, including projects, settings, and personal information will be permanently removed.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete Account</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

### Custom Styling

You can customize the appearance of alert dialog components using the `class` prop.

```astro
---
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction } from "@/components/starwind/alert-dialog";
import { Button } from "@/components/starwind/button";
---

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Custom Alert</Button>
  </AlertDialogTrigger>
  <AlertDialogContent class="sm:max-w-md">
    <AlertDialogHeader>
      <AlertDialogTitle class="text-center">Custom Alert Dialog</AlertDialogTitle>
      <AlertDialogDescription class="text-center">
        This alert dialog has custom styling applied to make it more compact and centered.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter class="sm:justify-center">
      <AlertDialogCancel class="w-full sm:w-auto">Cancel</AlertDialogCancel>
      <AlertDialogAction class="w-full sm:w-auto">Confirm</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## API Reference

### AlertDialog

The root component that manages the alert dialog state.

| Prop | Type | Default |
|------|------|---------|
| `class` | `string` | - |

```astro
<AlertDialog>
  <!-- Contains all alert dialog components -->
</AlertDialog>
```

### AlertDialogTrigger

A button that opens the alert dialog when clicked.

| Prop | Type | Default |
|------|------|---------|
| `asChild` | `boolean` | `false` |
| `for` | `string` | - |
| `class` | `string` | - |

```astro
<AlertDialogTrigger asChild>
  <Button>Open Alert</Button>
</AlertDialogTrigger>
```

**Additional Notes:**
- `asChild`: When enabled, renders the child element instead of a button
- `for`: Optional ID of the dialog to trigger

### AlertDialogContent

The modal content container that appears when the alert dialog is opened.

| Prop | Type | Default |
|------|------|---------|
| `animationDuration` | `number` | `200` |
| `class` | `string` | - |

```astro
<AlertDialogContent animationDuration={300}>
  <!-- Alert dialog content goes here -->
</AlertDialogContent>
```

**Additional Notes:**
- `animationDuration`: Open and close animation duration in milliseconds

### AlertDialogHeader

A container for the alert dialog title and description.

| Prop | Type | Default |
|------|------|---------|
| `class` | `string` | - |

```astro
<AlertDialogHeader>
  <AlertDialogTitle>Confirm Action</AlertDialogTitle>
  <AlertDialogDescription>Are you sure?</AlertDialogDescription>
</AlertDialogHeader>
```

### AlertDialogTitle

The title of the alert dialog. Automatically receives proper heading semantics.

| Prop | Type | Default |
|------|------|---------|
| `class` | `string` | - |

```astro
<AlertDialogTitle>
  Delete Account
</AlertDialogTitle>
```

### AlertDialogDescription

A description that provides additional context about the alert.

| Prop | Type | Default |
|------|------|---------|
| `class` | `string` | - |

```astro
<AlertDialogDescription>
  This action cannot be undone. Your data will be permanently deleted.
</AlertDialogDescription>
```

### AlertDialogFooter

A container for action buttons, typically containing cancel and confirm buttons.

| Prop | Type | Default |
|------|------|---------|
| `class` | `string` | - |

```astro
<AlertDialogFooter>
  <AlertDialogCancel>Cancel</AlertDialogCancel>
  <AlertDialogAction>Confirm</AlertDialogAction>
</AlertDialogFooter>
```

### AlertDialogAction

A button that performs the primary action and closes the alert dialog.

| Prop | Type | Default |
|------|------|---------|
| `asChild` | `boolean` | `false` |
| `class` | `string` | - |

```astro
<AlertDialogAction asChild>
  <Button variant="error">Delete</Button>
</AlertDialogAction>
```

**Additional Notes:**
- `asChild`: When enabled, renders the child element instead of a button

### AlertDialogCancel

A button that cancels the action and closes the alert dialog.

| Prop | Type | Default |
|------|------|---------|
| `asChild` | `boolean` | `false` |
| `class` | `string` | - |

```astro
<AlertDialogCancel>Cancel</AlertDialogCancel>
```

**Additional Notes:**
- `asChild`: When enabled, renders the child element instead of a button