components/bits/ConfirmDialog#

ConfirmDialog()#

function ConfirmDialog(props): Element;

Generic confirmation dialog for destructive or irreversible actions.

Replaces window.confirm, which is out of keeping with the rest of the app and can't carry an icon, a busy state, or translated copy.

Renders through StyledDialog so it inherits the app's dialog skin — the blurred scrim, the bordered paper, the button treatment. It used to render a raw MUI <Dialog> with its own borderRadius: 3 paper, which meant the app's confirmation dialogs were the ones that looked least like the app.

browser/DeleteConfirmationDialog and LostForeverWarning are now thin wrappers over this component rather than separate implementations.

Parameters#

Returns#

Element

ConfirmDialogProps#

Properties#

busy?#

optional busy?: boolean;

Keeps the dialog open with a spinner while the action is in flight.

cancelLabel?#

optional cancelLabel?: string;

Defaults to the shared common:buttons.cancel label.

children?#

optional children?: ReactNode;

Extra content between the message and the actions (a checkbox, a list).

confirmLabel#

confirmLabel: string;

destructive?#

optional destructive?: boolean;

Renders the confirm action in error colors and tints the icon tile.

icon?#

optional icon?: ElementType<any, keyof IntrinsicElements> | null;

Pass null to drop the icon tile entirely.

maxWidth?#

optional maxWidth?: "xs" | "sm";

xs (the default) for a one-line question, sm when the copy is longer.

message#

message: ReactNode;

onClose#

onClose: () => void;

Returns#

void

onConfirm#

onConfirm: () => void;

Returns#

void

open#

open: boolean;

sx?#

optional sx?: any;

Forwarded to the underlying dialog — layering, mostly.

title#

title: string;