Alert Dialog · paneui

Installation

pnpm dlx shadcn@latest add @paneui/alert-dialog

Usage

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

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="secondary" />}>Delete</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete this file?</AlertDialogTitle>
      <AlertDialogDescription>This can’t be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Composition

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

Examples

Small

Accessibility

The popup is an alertdialog. Focus is trapped and starts on Cancel, so Enter never confirms by accident. Esc cancels; a backdrop click does nothing.

API Reference

Built on the Alert Dialog primitive. Only the props this library adds or changes are listed; everything else passes through.

AlertDialog

Re-export of the primitive root. Also accepts every prop of AlertDialog.Root.

open: boolean; Controlled open state.
onOpenChange: (open: boolean, eventDetails) => void; Called when it opens or closes.

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean, eventDetails) => void	—	Called when it opens or closes.

AlertDialogContent

Portal, backdrop and centred popup. Also accepts every prop of AlertDialog.Popup.

size= "default": "sm" | "default"; sm is 20rem wide, centres the header and splits the footer into two equal buttons.
initialFocus= the Cancel button: AlertDialog.Popup initialFocus; Where focus goes on open.

Prop	Type	Default	Description
size	"sm" \| "default"	"default"	`sm` is 20rem wide, centres the header and splits the footer into two equal buttons.
initialFocus	AlertDialog.Popup initialFocus	the Cancel button	Where focus goes on open.

AlertDialogAction

Closes the dialog. Put the confirming work in onClick. Also accepts every prop of Button.

variant= "default": Button variant; Use destructive for deletes.

Prop	Type	Default	Description
variant	Button variant	"default"	Use `destructive` for deletes.

AlertDialogCancel

Closes without acting. Also accepts every prop of Button.

variant= "secondary": Button variant

Prop	Type	Default	Description
variant	Button variant	"secondary"

AlertDialogMedia

Slot above the title for an IconChip. Also accepts every prop of div.

AlertDialogHeader

Also accepts every prop of div.

AlertDialogFooter

Also accepts every prop of div.

AlertDialogTitle

Also accepts every prop of AlertDialog.Title.

AlertDialogDescription

Also accepts every prop of AlertDialog.Description.