ConfirmAction

A reusable confirmation that waits for the operation and shows its error instead of closing.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add confirm-action

Dependencies

What add confirm-action installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

Examples

3 examples · 1 component

Destructive action

The dialog waits for the request, then closes.

Failure and retry

The first attempt fails: the message shows in place and Confirm retries.

Ana Ruiz

From a menu item

Control open to confirm an action chosen in a DropdownMenu.

API reference

Configured through props: it renders AlertDialog and two Buttons for you, so there is no markup to compose.

Prop	Type	Default
`title` The question, naming the object ("Delete Marketing site?").	`ReactNode`	—
`description` What happens and whether it can be undone.	`ReactNode`	—
`children` Extra body content, such as a list of what will be affected.	`ReactNode`	—
`onConfirm` The operation. Return a promise: the dialog stays open and busy until it settles, closes when it resolves and shows the error when it rejects.	`() => unknown`	—
`trigger` The element that opens it, usually a Button. Omit it and control open to open from a menu item.	`ReactElement`	—
`open / onOpenChange` Controlled open state.	`boolean / (open) => void`	—
`confirmLabel / cancelLabel` Use the action's verb ("Delete project") rather than "OK".	`ReactNode`	`"Confirm" / "Cancel"`
`destructive` Destructive confirm button.	`boolean`	`false`
`errorMessage` Shown when onConfirm rejects; the function form maps your error to user-facing text.	`ReactNode \| (error) => ReactNode`	`"Something went wrong. Try again."`

States

The states that apply to this component and their visual treatment.

State	Treatment
Idle	Title, description and the two actions; focus on Cancel.
Pending	Confirm shows a spinner and keeps its width; Cancel and closing are disabled.
Error	The message appears above the actions; confirm again to retry.
Success	The dialog closes and focus returns to the trigger.

Accessibility

Built on AlertDialog: modal, focus trapped, and neither the backdrop nor Escape dismiss it, so the choice is always explicit.

Focus starts on Cancel, the least destructive option; closing returns it to the trigger.

While pending, the confirm button keeps focus and reports aria-busy, Cancel is disabled and the dialog can't close, so a slow request is never orphaned.

A failure is announced with role="alert" and the dialog stays open so the user can retry or cancel. Don't show raw server errors: map them with errorMessage.

The dialog is only the UI: authorization and the operation itself belong to your backend.