ConfirmDialog

Shorthand for confirmation dialogs. Use it instead of building a full Dialog every time.

Examples

Danger (destructive)

<ConfirmDialog
  isOpen={open}
  onClose={() => setOpen(false)}
  onConfirm={() => { /* delete */ setOpen(false); }}
  title="Delete permanently?"
  message="This action cannot be undone."
  confirmText="Yes, delete"
  variant="danger"
/>

Warning

<ConfirmDialog variant="warning" title="Disconnect channel?" ... />

Info

<ConfirmDialog variant="info" title="Continue without saving?" ... />

Global confirm() — Promise-based (recommended)

Wrap your app once with ConfirmProvider, then call confirm.danger/warning/info from anywhere — no isOpen state, no onConfirm callback. Returns Promise<boolean>.

Same dialog under the hood. Outside the Provider the call resolves to false silently — feature code can if (!ok) return; without crashing during SSR or before mount. useConfirm() hook returns the same shape attached to the nearest Provider.

// app/layout.tsx (Next) or main.tsx (Vite)
import { ConfirmProvider } from '@kactostecnologia/benix-ds/confirm';

export default function RootLayout({ children }) {
  return (
    <ConfirmProvider>
      {children}
    </ConfirmProvider>
  );
}

// anywhere — async/await
import { confirm } from '@kactostecnologia/benix-ds/confirm';

async function handleDelete() {
  const ok = await confirm.danger({
    title: 'Delete permanently?',
    message: 'This action cannot be undone.',
    confirmText: 'Yes, delete',
  });
  if (!ok) return;
  await api.delete();
}

API Reference

Props of the ConfirmDialog component.

Prop	Type	Default	Description
`isOpen*`	`boolean`	—	—
`onClose*`	`() => void`	—	—
`onConfirm*`	`() => void`	—	—
`title*`	`string`	—	—
`message*`	`ReactNode`	—	—
`confirmText`	`string`	`'Confirm'`	—
`cancelText`	`string`	`'Cancel'`	—
`variant`	`'danger' \| 'warning' \| 'info'`	`'warning'`	—
`isLoading`	`boolean`	`false`	—