components

ConfirmationDialog

ConfirmationDialog presents a simple confirm/cancel dialog for destructive or important actions. It renders a modal overlay with a message body, a Cancel button, and a primary action button whose label is set via confirmLabel. Use ConfirmationDialog when you need a quick yes/no decision from the user — for example, confirming a delete, discard, or reassignment. For more complex dialogs with multiple form fields or custom layouts, use Modal instead.

Import
import { ConfirmationDialog, Button } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

  • +Confirm destructive actions (delete, remove, discard changes).
  • +Simple yes/no decisions that need explicit user consent.
  • +When the action cannot be easily undone.

When not to use

  • −For complex forms or multi-step flows — use Modal.
  • −For non-blocking information — use Alert.
  • −For rich content or multiple actions — use Modal with custom footer.

Examples

Code Samples

Delete Confirmation

A typical pattern: a delete button that opens a ConfirmationDialog before proceeding.

import { useState } from "react";
import { ConfirmationDialog, Button } from "@skedulo/breeze-ui-react";

export default function DeleteConfirmation() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Delete Job</Button>
      <ConfirmationDialog
        open={open}
        confirmLabel="Delete"
        onConfirm={() => setOpen(false)}
        onCancel={() => setOpen(false)}
      >
        <p>Are you sure you want to delete this job?</p>
        <p className="text-gray-500 mt-1">This action cannot be undone.</p>
      </ConfirmationDialog>
    </>
  );
}

Reassignment Confirmation

Confirm before reassigning a resource to a different job.

import { useState } from "react";
import { ConfirmationDialog, Button } from "@skedulo/breeze-ui-react";

export default function ReassignConfirmation() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button buttonType="secondary" onClick={() => setOpen(true)}>
        Reassign Resource
      </Button>
      <ConfirmationDialog
        open={open}
        confirmLabel="Reassign"
        onConfirm={() => setOpen(false)}
        onCancel={() => setOpen(false)}
      >
        <p>Reassign Sarah Connor from this job to Job #4521?</p>
        <p className="text-gray-500 mt-1">
          The original job will become unassigned.
        </p>
      </ConfirmationDialog>
    </>
  );
}

Guidelines

Do

  • ✓Clearly state what will happen if the user confirms.
  • ✓Use a descriptive confirm button label (e.g. 'Delete Job' not just 'OK').
  • ✓Provide a cancel option that returns to the previous state.

Don't

  • ✗Don't use for routine actions that don't need confirmation.
  • ✗Don't chain multiple confirmation dialogs.
  • ✗Don't use generic labels like 'Are you sure?'— be specific.

API Reference

PropTypeDefaultDescription
openbooleanfalseControls whether the dialog is visible.
confirmLabel*ReactNode—Text or content for the primary action button (e.g. 'Delete', 'Confirm').
onConfirm*(e) => void—Fires when the user clicks the confirm button.
onCancel*(e) => void—Fires when the user clicks Cancel or closes the dialog.
childrenReactNode—The dialog body content — typically a message or question.

Related Components

ModalAlertButton