Confirm Destructive Action

ProNew

An alert dialog that unlocks the delete button only after the person types the resource name, locks while the action runs and shows a failure without closing.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

children

confirmText

actionLabel

pendingLabel

Guide and examples

When to use it

Use it for actions that cannot be undone and are costly to get wrong: deleting a project, a workspace or a database, removing a user, revoking a key. Typing the name makes the person look at what they are about to destroy, which a second "Are you sure?" button does not.

Do not use it for actions that can be undone. Prefer an undo toast there: it is faster and does not interrupt. For a low-risk delete, a plain AlertDialog is enough.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Usage

If onConfirm rejects, the dialog stays open, the field is marked invalid and the error message is announced. The dialog cannot be dismissed while the action is running.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	The element that opens the dialog, usually a `Button`.
`confirmText`	`string`	`-`	The text the person must type to unlock the action.
`onConfirm`	`() => void \| Promise<void>`	`-`	Runs when the action is confirmed. A rejection keeps the dialog open.
`title`	`ReactNode`	`Are you absolutely sure?`	The dialog title.
`description`	`ReactNode`	`This action cannot be undone.`	What will happen, in one or two sentences.
`actionLabel`	`string`	`Delete`	Label of the destructive button.
`pendingLabel`	`string`	`Deleting...`	Label of the destructive button while `onConfirm` runs.

Accessibility

The dialog is a Radix AlertDialog: it has the alertdialog role, traps focus and returns it to the trigger on close.
The field is labelled by its instruction. A failed action is shown in a role="alert" message linked to the field with aria-describedby, and the field gets aria-invalid.
Enter in the field confirms once the text matches; Escape closes the dialog unless the action is running.
The destructive button is disabled, not hidden, until the text matches, so its label stays discoverable.

Testing

The pattern ships with a Testing Library test (confirm-destructive-action.test.tsx) that covers the locked button, Enter to confirm, a failing action and clearing the field on cancel.

Guide and examples

When to use it

Do not use it for actions that can be undone. Prefer an undo toast there: it is faster and does not interrupt. For a low-risk delete, a plain AlertDialog is enough.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Usage

If onConfirm rejects, the dialog stays open, the field is marked invalid and the error message is announced. The dialog cannot be dismissed while the action is running.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	The element that opens the dialog, usually a `Button`.
`confirmText`	`string`	`-`	The text the person must type to unlock the action.
`onConfirm`	`() => void \| Promise<void>`	`-`	Runs when the action is confirmed. A rejection keeps the dialog open.
`title`	`ReactNode`	`Are you absolutely sure?`	The dialog title.
`description`	`ReactNode`	`This action cannot be undone.`	What will happen, in one or two sentences.
`actionLabel`	`string`	`Delete`	Label of the destructive button.
`pendingLabel`	`string`	`Deleting...`	Label of the destructive button while `onConfirm` runs.

Accessibility

The dialog is a Radix AlertDialog: it has the alertdialog role, traps focus and returns it to the trigger on close.
The field is labelled by its instruction. A failed action is shown in a role="alert" message linked to the field with aria-describedby, and the field gets aria-invalid.
Enter in the field confirms once the text matches; Escape closes the dialog unless the action is running.
The destructive button is disabled, not hidden, until the text matches, so its label stays discoverable.

Testing

The pattern ships with a Testing Library test (confirm-destructive-action.test.tsx) that covers the locked button, Enter to confirm, a failing action and clearing the field on cancel.