Skip to content
Back to skills

Confirm Dialog

ASecurity

Confirmation dialog with accept/reject actions. Built on Dialog. Also exports `useConfirmDialog` hook for imperative usage.

  • 4 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added May 27, 2026
data-aireactnodeapi

Works with

  • cli
  • api

Security analysis

A100/100

Scanned May 27, 2026

npx -y skills add reaviz/skills --skill confirm-dialog --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Confirm Dialog?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Confirm Dialog
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/reaviz-confirm-dialog/badge)](https://www.skillsdirectory.com/skills/reaviz-confirm-dialog)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
# ConfirmDialog

Confirmation dialog with accept/reject actions. Built on Dialog. Also exports `useConfirmDialog` hook for imperative usage.

## Import

```tsx
import { ConfirmDialog, useConfirmDialog } from 'reablocks';
```

## ConfirmDialog Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | `boolean` | — | Whether the dialog is open |
| `header` | `string \| ReactNode` | — | Dialog header |
| `content` | `string \| ReactNode` | — | Dialog body content |
| `confirmLabel` | `string` | `'Confirm'` | Confirm button text |
| `cancelLabel` | `string` | `'Cancel'` | Cancel button text |
| `variant` | `'default' \| 'destructive'` | `'default'` | Visual variant — `destructive` colors the confirm button as `error` for delete-style actions |
| `onConfirm` | `() => void` | — | Confirm callback |
| `onCancel` | `() => void` | — | Cancel callback (also closes the dialog) |

## Basic Usage

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

<ConfirmDialog
  open={open}
  header="Save Changes"
  content="Save your changes before continuing?"
  onConfirm={() => { save(); setOpen(false); }}
  onCancel={() => setOpen(false)}
/>
```

## Destructive Variant

Use `variant="destructive"` for dangerous actions (delete, remove, etc.). The confirm button renders with the error color.

```tsx
<ConfirmDialog
  open={open}
  variant="destructive"
  header="Delete Item"
  content="This action cannot be undone."
  confirmLabel="Delete"
  onConfirm={() => { deleteItem(); setOpen(false); }}
  onCancel={() => setOpen(false)}
/>
```

## useConfirmDialog Hook

Imperative API for opening confirm dialogs without managing state:

```tsx
const { openDialog, closeDialog, DialogComponent } = useConfirmDialog();

<Button onClick={() => openDialog({
  header: 'Confirm Action',
  content: 'Are you sure?',
  onConfirm: () => { doAction(); closeDialog(); },
  onCancel: () => closeDialog()
})}>
  Delete
</Button>

<DialogComponent />
```

### Hook Returns

| Property | Type | Description |
|----------|------|-------------|
| `isOpen` | `boolean` | Current open state |
| `openDialog` | `(props: OpenConfirmDialogProps) => void` | Open with props |
| `closeDialog` | `() => void` | Close the dialog |
| `DialogComponent` | `FC` | Render this in your JSX |

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.