# Alert Dialog

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction } from "@/components/starwind/alert-dialog";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <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>
  );
}
```
  </div>
</FrameworkCodeSwitcher>

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

## Framework Availability
Alert Dialog is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### AlertDialog
- Inherits div attributes.

### AlertDialogTrigger
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `false` | Wrapper prop | Merges the component behavior and props into its child element. |
- Inherits button attributes.

### AlertDialogContent
- Inherits dialog attributes.

### AlertDialogHeader
- Inherits div attributes.

### AlertDialogFooter
- Inherits div attributes.

### AlertDialogTitle
- Inherits h2 attributes.

### AlertDialogDescription
- Inherits p attributes.

### AlertDialogAction
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `false` | Wrapper prop | Merges the component behavior and props into its child element. |
- Inherits Button props.

### AlertDialogCancel
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `false` | Wrapper prop | Merges the component behavior and props into its child element. |
- Inherits Button props.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Alert Dialog Primitive](/docs/primitives/alert-dialog/)
- Runtime factory: [`createAlertDialog`](/docs/runtime/#create-alert-dialog) from `@starwind-ui/runtime/alert-dialog`

## Changelog

### v2.0.0

- Rebuilt Alert Dialog on Starwind Runtime for modal state, focus management, and dismissal in confirmation workflows.
- See the [Alert Dialog Primitive](/docs/primitives/alert-dialog/) for the underlying unstyled anatomy and behavior API.