ConfirmDialog

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

Import

import { ConfirmDialog, useConfirmDialog } from 'reablocks';

ConfirmDialog Props

Basic Usage

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.

<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:

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