Confirmation Dialog

Destructive action dialog requiring text confirmation

Basic Usage

Basic destructive confirmation

With icon and warnings

Async with loading state

pnpm add @corew500/ui

import { ConfirmationDialog } from "@corew500/ui/confirmation-dialog"

<ConfirmationDialog>Content</ConfirmationDialog>

Prop	Type	Default	Description
`open*`	enum	—	Whether the dialog is open
`onOpenChange*`	(open: boolean) => void	—	Callback when open state changes
`title*`	string	—	Dialog title text
`description`	string	—	Dialog description text
`confirmPhrase*`	string	—	The exact phrase the user must type to enable the action button
`confirmLabel`	string	`Confirm`	Label for the action button
`cancelLabel`	string	`Cancel`	Label for the cancel button
`inputLabel`	enum	—	Custom label for the confirmation input. Defaults to "Type {phrase} to confirm"
`inputPlaceholder`	string	—	Placeholder text for the confirmation input
`variant`	enum	`destructive`	Visual variant affecting the action button and warnings styling
`onConfirm*`	() => void \| Promise<void>	—	Callback when the action is confirmed. Can return a Promise for async operations.
`loading`	enum	—	External loading state. When provided, overrides internal loading management.
`icon`	enum	—	Optional icon displayed in the dialog header
`warnings`	string[]	—	Optional list of warning messages displayed above the confirmation input
`size`	enum	`default`	Dialog size variant
`className`	string	—	Additional CSS classes for the dialog content

- Inherits AlertDialog ARIA: role="alertdialog", aria-labelledby, aria-describedby
Live region announces loading state

- All text props should be pre-translated
`inputLabel`, `confirmLabel`, `cancelLabel`, `inputPlaceholder` are customizable