Confirmation Dialog

import { useConfirmation } from "@/hooks/use-confirmation"
 
function DeleteButton() {
  const confirm = useConfirmation()
 
  async function handleDelete() {
    const confirmed = await confirm({
      title: "Delete item",
      description: "Are you sure you want to delete this item? This action cannot be undone.",
      confirmText: "Delete",
      cancelText: "Cancel",
      variant: "destructive",
    })
 
    if (confirmed) {
      // Perform delete action
    }
  }
 
  return <Button onClick={handleDelete}>Delete</Button>
}

import { ConfirmationDialog, ConfirmationTrigger } from "@/components/confirmation-dialog"
 
<ConfirmationDialog
  title="Delete item"
  description="Are you sure you want to delete this item?"
  onConfirm={handleDelete}
  variant="destructive"
>
  <ConfirmationTrigger asChild>
    <Button variant="destructive">Delete</Button>
  </ConfirmationTrigger>
</ConfirmationDialog>

const confirm = useConfirmation()
 
const result = await confirm(options: ConfirmationOptions)