ConfirmDialog

ConfirmDialog is a focused modal for confirming a single action before it runs — typically a destructive one. It shows a title and description, a cancel and a confirm button, and calls onConfirm or onClose accordingly. Set destructive to style the confirm button as a danger action, and typeToConfirm to require the user to type a phrase (such as a resource name) before confirm is enabled. It is portaled, traps focus, and dismisses on Escape or backdrop click.

Example

Preview

import { ConfirmDialog } from '@officina/ui';

<ConfirmDialog
  open={open}
  onClose={() => setOpen(false)}
  onConfirm={deleteProject}
  title="Delete project?"
  description="This permanently removes the project and its data."
  confirmLabel="Delete"
  destructive
  typeToConfirm="my-project"
/>;

API

Prop	Type	Default	Description
description*	string	—	Body text explaining the consequence of confirming.
onClose*	() => void	—	Called when the dialog is dismissed or cancelled.
onConfirm*	() => void	—	Called when the user confirms the action.
open*	boolean	—	Whether the dialog is visible (controlled).
cancelLabel	string	Cancel	Label for the cancel button. Defaults to `'Cancel'`.
confirmLabel	string	Confirm	Label for the confirm button. Defaults to `'Confirm'`.
destructive	boolean	—	Styles the confirm button as a destructive action.
typeToConfirm	string	—	When set, user must type this value to enable the confirm button.

Example

API

On this page