Alert Dialog

A modal that interrupts for a decision. Unlike Dialog it cannot be dismissed by clicking outside — the person has to choose Cancel or the action.

tsx

1import {
2  AlertDialog,
3  AlertDialogTrigger,
4  AlertDialogContent,
5  AlertDialogHeader,
6  AlertDialogTitle,
7  AlertDialogDescription,
8  AlertDialogFooter,
9  AlertDialogCancel,
10  AlertDialogAction,
11} from "@pestoui/core"

Destructive confirmation

AlertDialogAction and AlertDialogCancel are Buttons, so they take variant and size. Cancel receives focus when the dialog opens.

Compact, with a media tile

size="sm" narrows the panel for a one-line question. AlertDialogMedia puts an icon tile above the title.

Props

Prop	Type	Default	Description
open / defaultOpen / onOpenChange	boolean / boolean / (open: boolean) => void	—	On AlertDialog. Controlled or uncontrolled open state, as on the Radix root.
size	"default" \| "sm"	"default"	On AlertDialogContent. The compact panel centres its header and splits the footer into two equal buttons.
variant	Button["variant"]	"default" / "outline"	On AlertDialogAction (default) and AlertDialogCancel (outline).
AlertDialogAction size	Button["size"]	"default"	On AlertDialogAction and AlertDialogCancel.
asChild	boolean	—	On AlertDialogTrigger. Hands the trigger behaviour to the child element, normally a Button.

PreviousAlert Next App Row

Pesto UI · 117 documented components