Components

ConfirmDialog

Confirming an action instead of window.confirm.

Confirming an action instead of window.confirm: the same purpose, but in your application's style, with a «working» state and without blocking the thread.

Example

import { ConfirmDialog } from "@toimetdev/pathlogs-core";

const [open, setOpen] = useState(false);
const [pending, startTransition] = useTransition();

<ConfirmDialog
  open={open}
  pending={pending}
  title="Delete this column?"
  message="Its cards will move to the first remaining column."
  confirmLabel="Delete"
  cancelLabel="Cancel"
  pendingLabel="Deleting…"
  onConfirm={() => startTransition(() => deleteColumn(id))}
  onCancel={() => setOpen(false)}
/>

Props

Prop	Type	Default	Description
`open`*	`boolean`	—	Whether the window is shown.
`title`*	`string`	—	The question — short and to the point.
`message`	`string`	—	The consequences: what exactly will happen, and what will not be undoable.
`onConfirm`*	`() => void`	—	Confirmation. The window does not close itself — close it once the action has finished.
`onCancel`*	`() => void`	—	Declining.
`pending`	`boolean`	`false`	The action is running: buttons are disabled and the window cannot be closed.
`tone`	`"danger" \| "accent"`	`"danger"`	A destructive action, or an ordinary question.
`confirmLabel`	`string`	`"Confirm"`	The confirm button's caption.
`cancelLabel`	`string`	`"Cancel"`	The cancel button's caption.
`pendingLabel`	`string`	`"Working…"`	The caption while the action runs.

open*boolean

Whether the window is shown.

title*string

The question — short and to the point.

messagestring

The consequences: what exactly will happen, and what will not be undoable.

onConfirm*() => void

Confirmation. The window does not close itself — close it once the action has finished.

onCancel*() => void

Declining.

pendingboolean

defaults to: false

The action is running: buttons are disabled and the window cannot be closed.

tone"danger" | "accent"

defaults to: "danger"

A destructive action, or an ordinary question.

confirmLabelstring

defaults to: "Confirm"

The confirm button's caption.

cancelLabelstring

defaults to: "Cancel"

The cancel button's caption.

pendingLabelstring

defaults to: "Working…"

The caption while the action runs.

Tone

danger — an exclamation mark in a triangle and a red button: for deletion and anything irreversible. accent — a question mark in a circle: for ordinary «are you sure?» moments.

Your own wrapper

If your product's wording differs from the defaults, put a thin wrapper in the application rather than repeating captions at every call site:

src/components/Confirm.tsx

import { ConfirmDialog, type ConfirmDialogProps } from "@toimetdev/pathlogs-core";

export function Confirm(props: ConfirmDialogProps) {
  return (
    <ConfirmDialog
      confirmLabel="Yes, go ahead"
      cancelLabel="Never mind"
      pendingLabel="Working on it…"
      {...props}
    />
  );
}

The framework makes no claim on such wrappers: the set of captions depends on your product's tone of voice, not on the component.