Alert Dialog | Bearnie

<AlertDialog>
  <AlertDialogTrigger>
    <Button variant="outline">Delete Account</Button>
  </AlertDialogTrigger>
  <AlertDialogOverlay />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you 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

npx bearnie add alert-dialog

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/bearnie/alert-dialog"

<AlertDialog>
  <AlertDialogTrigger>
    <Button>Open</Button>
  </AlertDialogTrigger>
  <AlertDialogOverlay />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Destructive action

<AlertDialog>
  <AlertDialogTrigger>
    <Button variant="destructive">Delete Project</Button>
  </AlertDialogTrigger>
  <AlertDialogOverlay />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete project?</AlertDialogTitle>
      <AlertDialogDescription>
        This will permanently delete the project "My Project" and all of its data. This action cannot be reversed.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">
        Delete
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

With Icon

Add an icon to the title for visual emphasis.

<AlertDialog>
  <AlertDialogTrigger>
    <Button variant="outline">Clear Data</Button>
  </AlertDialogTrigger>
  <AlertDialogOverlay />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle class="flex items-center gap-2">
        <TriangleAlert class="size-5 text-destructive" />
        Clear all data?
      </AlertDialogTitle>
      <AlertDialogDescription>
        This will remove all cached data and reset your preferences. You will need to sign in again.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Clear Data</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

With Custom Content

Add lists, inputs, or any custom content to the description area.

<AlertDialog>
  <AlertDialogTrigger>
    <Button variant="destructive">Delete Items</Button>
  </AlertDialogTrigger>
  <AlertDialogOverlay />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle class="flex items-center gap-2">
        <Trash2 class="size-5" />
        Delete selected items?
      </AlertDialogTitle>
      <AlertDialogDescription>
        <span>The following items will be permanently deleted:</span>
        <ul class="list-disc list-inside pt-2 space-y-1 text-foreground">
          <li>Project documentation</li>
          <li>Source code files</li>
          <li>Database backups</li>
        </ul>
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Keep Items</AlertDialogCancel>
      <AlertDialogAction variant="destructive">
        Delete All
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Difference from Dialog

Alert Dialog is specifically designed for confirmation actions:

No close on overlay click - Users must explicitly choose an action
Cancel button included - Always provides a way to dismiss
Focused interaction - Emphasizes the confirm/cancel pattern
Uses role="alertdialog" - Proper accessibility semantics

Use Alert Dialog when you need user confirmation before a destructive or important action.

Props

All Alert Dialog components accept class for additional CSS classes.

AlertDialogAction

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive'`	`'default'`	The visual style of the action button

AlertDialogCancel

Styled as an outline button. Override styles using the class prop.

Dependencies

This component uses the Button component internally. Make sure to install it.