Dialog confirm

Asks for confirmation before a destructive or irreversible action, optionally by typing a word.

import { Button, Dialog, DialogConfirm, type DialogConfirmPayload } from "@openperf/deft";

import { Preview } from "../../src/Preview";

const HANDLE = Dialog.createHandle<DialogConfirmPayload>();

export default function DialogConfirmBasic() {
  return (
    <Preview overlay={true}>
      <Dialog.Trigger
        handle={HANDLE}
        payload={{ title: "Title", description: "Description", onConfirm: () => HANDLE.close() }}
        render={<Button.Root />}
      >
        Open dialog
      </Dialog.Trigger>
      <DialogConfirm handle={HANDLE} />
    </Preview>
  );
}

Use it before an action that deletes data or can’t be undone. Use a Dialog for anything that needs a form.
Create a handle with Dialog.createHandle and pass it to every Dialog.Trigger and to one DialogConfirm.
The dialog’s content comes from the payload of the trigger that opened it, so one DialogConfirm serves every trigger on the page.
A destructive confirm button is danger with a verb label, such as “Delete”. The button that opens the dialog stays default or ghost.
Close the dialog from onConfirm with handle.close() once the action is done.
While pending is true, the confirm button shows a spinner, Cancel is disabled, and Escape and outside clicks don’t close the dialog.

Typed confirmation

import { Button, Dialog, DialogConfirm, type DialogConfirmPayload } from "@openperf/deft";

import { Preview } from "../../src/Preview";

const HANDLE = Dialog.createHandle<DialogConfirmPayload>();

export default function DialogConfirmExpected() {
  return (
    <Preview overlay={true}>
      <Dialog.Trigger
        handle={HANDLE}
        payload={{
          title: "Title",
          description: "Description",
          expected: "Value",
          onConfirm: () => HANDLE.close(),
        }}
        render={<Button.Root />}
      >
        Open dialog
      </Dialog.Trigger>
      <DialogConfirm handle={HANDLE} />
    </Preview>
  );
}

Set expected in the payload to add a field labelled “Type … to confirm”. The confirm button stays disabled until the typed text matches; spaces around it are ignored.

API

PropType

handleDialogHandle<DialogConfirmPayload>

From Dialog.createHandle, shared with the triggers.

TypeDialogHandle<DialogConfirmPayload>

pending?boolean

Shows a spinner and blocks Cancel and dismissal.

Typeboolean

Defaultfalse

children?(payload) => ReactNode

Extra detail rendered under the description.

Type(payload) => ReactNode

Payload

PropType

titleReactNode

TypeReactNode

onConfirm() => void

Type() => void

description?ReactNode

TypeReactNode

expected?string

Text the user must type to enable confirmation.

Typestring

confirmLabel?ReactNode

TypeReactNode

Default"Confirm"

cancelLabel?ReactNode

TypeReactNode

Default"Cancel"

confirmVariant?"default" | "field" | "primary" | "ghost" | "danger"

Variant of the confirm button.

Type"default" | "field" | "primary" | "ghost" | "danger"

Default"primary"

Built on Dialog, Button, Field and Input.