ConfirmDialog

ConfirmDialog asks the user to confirm an action. It's driven by a single confirmOptions object that defines the message, buttons, and callbacks — and can optionally require a comment or collect extra fields before confirming (useful for reject-with-reason flows).

When to use

• Guard destructive or irreversible actions (delete, submit, reject).
• Capture a reason/comment alongside the confirmation.

Import

import { ConfirmDialog } from '@spartanfx/react';

Basic usage

Render it when you want it shown, and hide it in onDismiss. confirmOptions.onConfirm runs the action.

function DeleteButton({ onDeleted }: { onDeleted: () => void }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Delete</button>
      {open && (
        <ConfirmDialog
          onDismiss={() => setOpen(false)}
          confirmOptions={{
            title: 'Delete item?',
            message: 'This action cannot be undone.',
            confirmButtonLabel: 'Delete',
            rejectButtonLabel: 'Cancel',
            onConfirm: () => {
              onDeleted();
              setOpen(false);
            },
          }}
        />
      )}
    </>
  );
}

Require a comment

Set commentType to 'mandatory' (or 'optional') to capture a note; it's passed to onConfirm.

<ConfirmDialog
  onDismiss={() => setOpen(false)}
  confirmOptions={{
    title: 'Reject request',
    message: 'Tell the requester why.',
    commentType: 'mandatory',
    onConfirm: (comment) => rejectWith(comment),
  }}
/>

Key props

Prop	Type	Notes
confirmOptions (required)	IConfirmOptions	message + onConfirm, plus optional title, button labels, commentType, additionalFields.
onDismiss (required)	() => void	Called when the dialog is cancelled/closed.
appearance	AppearanceMode	Light or dark theming.

See the full generated reference: ConfirmDialog API ↗ and IConfirmOptions.

See also

• Components overview