Confirmation Dialog

Destructive action dialog requiring text confirmation

Basic Usage

Basic destructive confirmation

With icon and warnings

Async with loading state

Installation

pnpm add @corew500/ui

Usage

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

<ConfirmationDialog>Content</ConfirmationDialog>

API Reference

Props

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
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`initialFocus`	enum	—	Determines the element to focus when the dialog is opened. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (first tabbable element or popup). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
`finalFocus`	enum	—	Determines the element to focus when the dialog is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
`size`	enum	—	—

Accessibility

Focus Management

Focus trapped within dialog when open
Confirmation input receives focus when dialog opens

Screen Readers

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

Additional

Action button clearly indicates disabled state

Localization

Translatable Content

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

Additional

`confirmPhrase` is displayed to the user and used for matching

Related Components

AlertDialog