Alert Dialog
A modal dialog that interrupts the user with important content and requires a response.
Installation
pnpm dlx stera-ui add alert-dialogUsage
import {
AlertDialog,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogAction,
AlertDialogCancel,
} from "@/components/ui/alert-dialog"<AlertDialog>
<AlertDialogTrigger render={<Button variant="outline">Open</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Confirm</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>With Media
Use AlertDialogMedia to display an icon above the title for additional visual context.
Small Size
Destructive
Pass variant="danger" to AlertDialogAction for destructive confirmations.
API Reference
AlertDialogContent
| Prop | Type | Default |
|---|---|---|
size | "default" | "sm" | "default" |
AlertDialogAction
| Prop | Type | Default |
|---|---|---|
variant | "default" | "danger" | "default" |
AlertDialogTrigger
| Prop | Type | Description |
|---|---|---|
render | ReactElement | Render prop for the trigger element |