PopoverDeleteConfirm
Delete confirmation in a popover, triggered by any element
Preview
Usage
import { PopoverDeleteConfirm } from "@/components/ui/popover-delete-confirm"
import { Button } from "@/components/ui/button"
import { Trash2 } from "lucide-react"
<PopoverDeleteConfirm
confirmMessage="This will permanently delete this document and all its content."
onConfirm={() => deleteDocument(id)}
isDeleting={isPending}
>
<Button variant="ghost" size="icon">
<Trash2 className="h-4 w-4" />
</Button>
</PopoverDeleteConfirm>Wraps any trigger element in a popover that shows a warning icon, confirmation message, and cancel/delete buttons. Customize button labels with cancelLabel, confirmLabel, and deletingLabel. Control placement with align and side props.
Install
npx shadcn add @bonsai/popover-delete-confirm