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.

---
// Root wrapper component
---
<AlertDialog>
  <!-- Contains all alert dialog components -->
</AlertDialog>

AlertDialogTrigger

A button that opens the alert dialog when clicked.

---
// Button trigger - can be used with asChild to wrap custom elements
---
<AlertDialogTrigger asChild>
  <Button>Open Alert</Button>
</AlertDialogTrigger>

<!-- Or as a standalone button -->
<AlertDialogTrigger>Open Alert</AlertDialogTrigger>

Props:

asChild?: boolean - When true, renders the child element instead of a button
for?: string - Optional ID of the dialog to trigger

AlertDialogContent

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

---
// Modal content with customizable animation duration
---
<AlertDialogContent animationDuration={300} class="sm:max-w-md">
  <!-- Alert dialog content goes here -->
</AlertDialogContent>

Props:

animationDuration?: number - Open and close animation duration in milliseconds (default: 200)
class?: string - Additional CSS classes to apply

AlertDialogHeader

A container for the alert dialog title and description.

---
// Header section containing title and description
---
<AlertDialogHeader>
  <AlertDialogTitle>Confirm Action</AlertDialogTitle>
  <AlertDialogDescription>Are you sure?</AlertDialogDescription>
</AlertDialogHeader>

AlertDialogTitle

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

---
// Renders as an h2 element with proper styling
---
<AlertDialogTitle class="text-center">
  Delete Account
</AlertDialogTitle>

AlertDialogDescription

A description that provides additional context about the alert.

---
// Renders as a p element with muted styling
---
<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.

---
// Footer with responsive button layout
---
<AlertDialogFooter>
  <AlertDialogCancel>Cancel</AlertDialogCancel>
  <AlertDialogAction>Confirm</AlertDialogAction>
</AlertDialogFooter>

AlertDialogAction

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

---
// Primary action button with default styling
---
<AlertDialogAction>Continue</AlertDialogAction>

<!-- Or with custom element using asChild -->
<AlertDialogAction asChild>
  <Button variant="error">Delete</Button>
</AlertDialogAction>

Props:

asChild?: boolean - When true, renders the child element instead of a button
class?: string - Additional CSS classes to apply

AlertDialogCancel

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

---
// Cancel button with outline styling by default
---
<AlertDialogCancel>Cancel</AlertDialogCancel>

<!-- Or with custom element using asChild -->
<AlertDialogCancel asChild>
  <Button variant="ghost">Cancel</Button>
</AlertDialogCancel>

Props:

asChild?: boolean - When true, renders the child element instead of a button
class?: string - Additional CSS classes to apply

Changelog

v1.0.1

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

v1.0.0

Initial release with starwind v1.9.0