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

Record Delete Confirm Dialog component.

**Demo:**

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

import { useState } from 'react';

import { RecordDeleteConfirmDialog } from '@docyrus/ui/components/record-delete-confirm-dialog';
import { Button } from '@docyrus/ui/primitives/ui/button';
import { cn } from '@docyrus/ui/primitives/lib/utils';

import { PropControls } from '@/components/prop-controls';
import { useDemoData } from '@/data/record-delete-confirm-dialog-data';

export function RecordDeleteConfirmDialogDemo() {
  const { props, controls } = useDemoData();
  const [open, setOpen] = useState(false);

  return (
    <div className="w-full">
      <div className="mb-3 flex justify-end">
        <button
          type="button"
          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-sm font-medium transition-colors hover:bg-accent"
          onClick={() => setOpen(prev => !prev)}>
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" /></svg>
          Configure
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={cn('transition-transform duration-200', open && 'rotate-180')}><path d="m6 9 6 6 6-6" /></svg>
        </button>
      </div>
      <div
        className={cn(
          'grid transition-[grid-template-rows] duration-300 ease-in-out',
          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
        )}>
        <div className="overflow-hidden">
          <div className="mb-4 rounded-lg border border-border bg-muted/30 p-4 grid gap-6">
            
          </div>
        </div>
      </div>
      <div className="mt-3 flex flex-wrap gap-2">
        
      </div>
      
    </div>
  );
}
```

## Installation

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

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import { RecordDeleteConfirmDialog } from "@docyrus/ui/components/record-delete-confirm-dialog";
import type { DataSourceRelation } from "@docyrus/ui/components/record-delete-confirm-dialog";
import { useState } from "react";

const relations: DataSourceRelation[] = [
  { dataSourceId: "tasks", dataSourceName: "Tasks", dataSourceSlug: "tasks", appSlug: "base", dataSourceType: "table", fieldId: "task_id", fieldSlug: "task_id", fieldName: "Task", fieldType: "relation" }
];

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

  return (
    <RecordDeleteConfirmDialog
      open={open}
      onOpenChange={setOpen}
      recordCount={2}
      relations={relations}
      onConfirm={(childActions) => console.log(childActions)}
    />
  );
}
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `open` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `recordCount` | `number` | — |
| `relations` | `DataSourceRelation[]` | `[]` |
| `isLoadingRelations` | `boolean` | `false` |
| `onConfirm` | `(childActions: Record<string, ChildAction>) => void \| Promise<void>` | — |
| `isPending` | `boolean` | `false` |
| `className` | `string` | — |

## Components

| Component | Description |
|-----------|-------------|
| `RecordDeleteConfirmDialog` | Public export |

## Type Exports

| Type | Description |
|------|-------------|
| `DataSourceRelation` | — |

## Type Reference

### DataSourceRelation

| Field | Type | Description |
|-------|------|-------------|
| `dataSourceId` | `string` | — |
| `dataSourceName` | `string` | — |
| `dataSourceSlug` | `string` | — |
| `appSlug` | `string` | — |
| `dataSourceType` | `string` | — |
| `fieldId` | `string` | — |
| `fieldSlug` | `string` | — |
| `fieldName` | `string` | — |
| `fieldType` | `string` | — |