ConfirmDialog

A modal confirmation dialog for actions that require explicit user approval. Supports default, danger, and warning variants that style the confirm button accordingly. Handles async confirm callbacks with automatic loading state.

Import

import { ConfirmDialog } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

const [open, setOpen] = useState(false);
 
<ConfirmDialog
  open={open}
  onClose={() => setOpen(false)}
  onConfirm={async () => {
    await deleteItem();
    setOpen(false);
  }}
  title="Delete lesson"
  description="Are you sure you want to delete this lesson? This action cannot be undone."
  variant="danger"
  confirmText="Delete"
/>

Props

Prop	Type	Default	Description
`open`*	boolean	-	Whether the dialog is open.
`onClose`*	() => void	-	Callback when the dialog should close.
`onConfirm`*	() => void \| Promise<void>	-	Callback when the user confirms. Async functions show a loading spinner automatically.
`title`*	string	-	Dialog title text.
`description`	string	-	Dialog description text shown below the title.
`children`	ReactNode	-	Additional content rendered in the dialog body.
`confirmText`	string	`'Confirm'`	Label for the confirm button.
`cancelText`	string	`'Cancel'`	Label for the cancel button.
`variant`	'default' \| 'danger' \| 'warning'	`'default'`	Visual variant that controls confirm button styling.
`loading`	boolean	`false`	External loading state for the confirm button.
`disabled`	boolean	`false`	Whether the confirm button is disabled.
`icon`	ReactNode	-	Icon displayed in the header area.
`className`	string	-	Additional CSS class for the dialog.