Components
Loading preview...
HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples. Uses the real @heroui/react component with bundled @heroui/styles CSS.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-alert-dialog"use client"
import { AlertDialog } from "@/components/ui/heroui-alert-dialog"
import { Button } from "@heroui/react"
import { Trash2 } from "lucide-react"
export default function CustomTrigger() {
return (
<AlertDialog>
<AlertDialog.Trigger className="group flex min-w-[280px] items-center gap-3 rounded-2xl bg-surface p-4 shadow-xs select-none hover:bg-surface-secondary">
<div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-danger-soft text-danger-soft-foreground">
<Trash2 className="size-6" />
</div>
<div className="flex flex-1 flex-col gap-0.5 text-left">
<p className="text-sm font-semibold">Delete Item</p>
<p className="text-xs text-muted">Permanently remove this item</p>
</div>
</AlertDialog.Trigger>
<AlertDialog.Backdrop>
<AlertDialog.Container>
<AlertDialog.Dialog className="sm:max-w-[400px]">
<AlertDialog.CloseTrigger />
<AlertDialog.Header>
<AlertDialog.Icon status="danger"><Trash2 className="size-5" /></AlertDialog.Icon>
<AlertDialog.Heading>Delete this item?</AlertDialog.Heading>
</AlertDialog.Header>
<AlertDialog.Body>
<p>Use AlertDialog.Trigger to create custom trigger elements beyond standard buttons. This example shows a card-style trigger with icons and descriptive text.</p>
</AlertDialog.Body>
<AlertDialog.Footer>
<Button slot="close" variant="tertiary">Cancel</Button>
<Button slot="close" variant="danger">Delete Item</Button>
</AlertDialog.Footer>
</AlertDialog.Dialog>
</AlertDialog.Container>
</AlertDialog.Backdrop>
</AlertDialog>
)
}