shuip

DocumentationBlocks
X

Confirmation Dialog

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

npx shadcn@latest add https://shuip.plvo.dev/r/confirmation-dialog.json
pnpm dlx shadcn@latest add https://shuip.plvo.dev/r/confirmation-dialog.json
bun x shadcn@latest add https://shuip.plvo.dev/r/confirmation-dialog.json
import type * as React from 'react';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';


export interface ConfirmationDialogProps extends React.RefAttributes<HTMLDialogElement> {
  trigger?: React.ReactNode;
  title?: string;
  description?: string;
  labelConfirmButton?: string;
  onConfirm?: () => void;
}


export function ConfirmationDialog({
  trigger,
  title,
  description,
  labelConfirmButton,
  onConfirm,
  ...props
}: ConfirmationDialogProps) {
  return (
    <Dialog {...props}>
      <DialogTrigger asChild>{trigger}</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription className='md:text-left'>{description}</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button onClick={onConfirm}>{labelConfirmButton}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
Loading...

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

Loading...
import { Button } from '@/components/ui/button';
import { ConfirmationDialog } from '@/components/ui/shuip/confirmation-dialog';


export default function ConfirmationDialogExample() {
  return (
    <ConfirmationDialog
      trigger={<Button>Open confirmation dialog</Button>}
      title='Confirmation Dialog'
      description='Are you sure you want to make this action?'
      labelConfirmButton='Make it'
      onConfirm={() => alert('Confirmed')}
    />
  );
}

Props

Prop

Type

On this page

Simple integration
Common use cases
Delete confirmation
Save confirmation
Custom trigger with icon
Examples
Props