Confirmation Dialog

A specialized dialog component for confirming user actions. Use this component when you need to confirm destructive actions, important changes, or any action that requires explicit user consent.

Installation

pnpm dlx shadcn@latest add https://ui-registry.com/r/confirmation-dialog.json

Usage

import {
  ConfirmationDialog,
  useConfirmationDialog,
} from '@/components/ui/confirmation-dialog';

const [open, setOpen] = useState(false);

<ConfirmationDialog   open={open}   onOpenChange={setOpen}   title="Delete item?"   description="This action cannot be undone."   onConfirm={() => handleDelete()}   onCancel={() => setOpen(false)}   variant="destructive" />

Examples

Basic Confirmation

<ConfirmationDialog
  open={open}
  onOpenChange={setOpen}
  title="Confirm action"
  description="Are you sure you want to proceed?"
  onConfirm={handleConfirm}
/>

Destructive Action

<ConfirmationDialog
  open={open}
  onOpenChange={setOpen}
  title="Delete account"
  description="This will permanently delete your account and all associated data. This action cannot be undone."
  confirmText="Delete"
  cancelText="Keep account"
  variant="destructive"
  onConfirm={handleDeleteAccount}
/>

Warning Variant

<ConfirmationDialog
  open={open}
  onOpenChange={setOpen}
  title="Unsaved changes"
  description="You have unsaved changes. Are you sure you want to leave?"
  confirmText="Leave"
  cancelText="Stay"
  variant="warning"
  onConfirm={handleLeave}
/>

Using the Hook

function DeleteButton() {
  const { confirm, dialogProps } = useConfirmationDialog({
    title: 'Delete item?',
    description: 'This action cannot be undone.',
    variant: 'destructive',
    confirmText: 'Delete',
  });

  const handleDelete = async () => {     const confirmed = await confirm();     if (confirmed) {       // Perform deletion       await deleteItem();     }   };

  return (     <>       <Button variant="destructive" onClick={handleDelete}>         Delete       </Button>       <ConfirmationDialog {...dialogProps} />     </>   ); }

With Loading State

function SaveButton() {
  const { confirm, dialogProps, setLoading } = useConfirmationDialog({
    title: 'Save changes?',
    description: 'This will update the record.',
  });

  const handleSave = async () => {     const confirmed = await confirm();     if (confirmed) {       setLoading(true);       await saveChanges();       setLoading(false);     }   };

  return (     <>       <Button onClick={handleSave}>Save</Button>       <ConfirmationDialog {...dialogProps} />     </>   ); }

API Reference

ConfirmationDialog

Prop	Type	Default
open	boolean	-
onOpenChange	(open: boolean) => void	-
onConfirm	() => void	-
onCancel	() => void	-
title	string	"Are you sure?"
description	string	"This action cannot be undone."
confirmText	string	"Confirm"
cancelText	string	"Cancel"
variant	"default" \	"destructive" \	"warning"	"default"
loading	boolean	false
className	string	-

useConfirmationDialog

Returns an object with:

Property	Type	Description
open	boolean	Current open state
loading	boolean	Current loading state
setLoading	(loading: boolean) => void	Set loading state
confirm	() => Promise	Open dialog and wait for response
dialogProps	ConfirmationDialogProps	Props to spread on the dialog