shuip

Confirmation Dialog

A standardized way to ask for user confirmation before executing critical actions like deleting data, logging out, or making irreversible changes.

Installation

npx shadcn@latest add https://shuip.xyz/r/confirmation-dialog.json

Preview

Simple integration

<Dialog>
<DialogTrigger asChild>
  <Button variant="destructive">Delete</Button>
</DialogTrigger>
<DialogContent>
  <DialogHeader>
    <DialogTitle>Are you sure?</DialogTitle>
    <DialogDescription>
      This action cannot be undone. This will permanently delete the item.
    </DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button variant="destructive" onClick={handleDelete}>Delete</Button>
  </DialogFooter>
</DialogContent>
</Dialog>

With ConfirmationDialog, the same result in a clean, reusable component:

<ConfirmationDialog
    trigger={<Button variant="destructive">Delete</Button>}
    title="Are you sure?"
    description="This action cannot be undone. This will permanently delete the item."
    labelConfirmButton="Delete"
    onConfirm={handleDelete}
/>

Common use cases

// Delete confirmation
<ConfirmationDialog
    trigger={<Button variant="destructive">Delete Account</Button>}
    title="Delete Account"
    description="This will permanently delete your account and all associated data. This action cannot be undone."
    labelConfirmButton="Delete Account"
    onConfirm={() => deleteAccount()}
/>


// Save confirmation
<ConfirmationDialog
    trigger={<Button>Save Changes</Button>}
    title="Save Changes"
    description="Are you sure you want to save these changes?"
    labelConfirmButton="Save"
    onConfirm={() => saveChanges()}
/>


// Custom trigger with icon
<ConfirmationDialog
    trigger={
      <Button variant="ghost" size="icon">
        <Trash2 className="size-4" />
      </Button>
    }
    title="Delete Item"
    description="This item will be permanently removed."
    labelConfirmButton="Delete"
    onConfirm={() => deleteItem(id)}
/>

Examples

Default

Props

NameTypeDescription
triggerReact.ReactNodeThe trigger to open the dialog
titlestringThe title of the dialog
descriptionstringThe description of the dialog
labelConfirmButtonstringThe label of the confirmation button
onConfirm() => voidThe function to call when the confirmation button is clicked
...propsReact.RefAttributes<HTMLDialogElement>All props to apply to the dialog