Overlays

ConfirmDialog

Async confirmation dialog. Mount <ConfirmDialogProvider> once at the app root, then call useConfirm() anywhere below it. Returns a Promise<boolean> — true if the user confirmed, false if they cancelled or closed.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Promise-based yes/no dialog. Mount ConfirmDialogProvider once, then await confirm({...}) anywhere below it: true on confirm, false on cancel or dismiss. Built on Modal.

import { ConfirmDialogProvider, useConfirm } from 'achery-ui'

<ConfirmDialogProvider>
  <App />
</ConfirmDialogProvider>

const confirm = useConfirm()
if (await confirm({ title: 'Delete task?', message: "This can't be undone.", confirmLabel: 'Delete', destructive: true })) {
  await deleteTask(id)
}

Option	Type	Default	Notes
`message`	`ReactNode`	—	Required. The body text
`title`	`ReactNode`	—
`confirmLabel`	`string`	`'Confirm'`
`cancelLabel`	`string`	`'Cancel'`
`confirmVariant`	`'accent' \| 'secondary' \| 'ghost'`	`'accent'`	Ignored when `destructive`
`destructive`	`boolean`	`false`	Confirm uses Button's `danger` variant

The message describes the dialog (aria-describedby), so a screen reader announces it with the title when it opens. useConfirm() throws outside a ConfirmDialogProvider.