# Delete Confirm Dialog
URL: /docs/web/components/delete-confirm-dialog

Delete Confirm Dialog component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import { DeleteConfirmDialog } from '@docyrus/ui/components/delete-confirm-dialog';
import { Button } from '@docyrus/ui/primitives/ui/button';

export function DeleteConfirmDialogDemo() {
  const [open, setOpen] = useState(false);

  return (
    <div className="flex flex-wrap items-center gap-3">
      
      <DeleteConfirmDialog
        open={open}
        onOpenChange={setOpen}
        objectName="item"
        count={3}
        onConfirm={() => setOpen(false)} />
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-delete-confirm-dialog
```

## Usage

```tsx
import {
  DeleteConfirmDialog
} from "@docyrus/ui/components/delete-confirm-dialog";

<DeleteConfirmDialog
  open
  onOpenChange={() => {}}
  objectName="..."
  count={0}
  onConfirm={() => {}}
  isPending
/>
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `open` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `objectName` | `string` | — |
| `count` | `number` | — |
| `onConfirm` | `() => void \| Promise<void>` | — |
| `isPending` | `boolean` | — |
| `className` | `string` | — |