DropdownDeleteConfirm
Delete confirmation integrated into a dropdown menu
Preview
Usage
import { DropdownDeleteConfirm } from "@/components/ui/dropdown-delete-confirm"
import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { MoreHorizontal, Pencil, Trash2 } from "lucide-react"
<DropdownDeleteConfirm
trigger={
<Button variant="ghost" size="icon">
<MoreHorizontal className="h-4 w-4" />
</Button>
}
confirmMessage="This will permanently delete this item."
onConfirm={() => deleteItem(id)}
isDeleting={isPending}
>
{({ setConfirming }) => (
<>
<DropdownMenuItem>
<Pencil className="mr-2 h-4 w-4" />
Edit
</DropdownMenuItem>
<DropdownMenuItem
className="text-destructive"
onSelect={(e) => {
e.preventDefault()
setConfirming(true)
}}
>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</DropdownMenuItem>
</>
)}
</DropdownDeleteConfirm>The children render prop receives setConfirming to transition from the menu items to the confirmation panel. The confirmation panel slides in with a smooth grid-template-rows animation. Closing the dropdown resets the confirming state.
Install
npx shadcn add @bonsai/dropdown-delete-confirm