On this page

Alert Dialog

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

pnpx starwind@latest add alert-dialog

npx starwind@latest add alert-dialog

yarn dlx 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.

---
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.

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

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

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

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

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

<AlertDialogTitle>
  Delete Account
</AlertDialogTitle>

AlertDialogDescription

A description that provides additional context about the alert.

Prop	Type	Default
`class`	`string`	-

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

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

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

<AlertDialogCancel>Cancel</AlertDialogCancel>

Additional Notes:

asChild: When enabled, renders the child element instead of a button

Changelog

v1.0.2

use class:list to remove potential “undefined” on AlertDialogAction and AlertDialogCancel

v1.0.1

Add named slot “backdrop” to AlertDialogContent to enable backdrop replacement

v1.0.0

Initial release with starwind v1.9.0