1
Patterns

Destructive Confirmation

A destructive account action with explicit cancellation, confirmation and result status.

Import

Curated pattern example pending.
import { DestructiveConfirmation } from "@/components/patterns/destructive-confirmation";

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/destructive-confirmation

Import

import { DestructiveConfirmation } from "@/components/patterns/destructive-confirmation";

Need the machine-readable source metadata? View registry JSON.

Usage

Destructive Confirmation has source and usage docs, but no curated public example set yet.

import { DestructiveConfirmation } from "@/components/patterns/destructive-confirmation";

Purpose

Destructive Confirmation is a registry:component for an irreversible account action with explicit cancellation, confirmation and a visible result status.

API Reference

  • Render DestructiveConfirmation for the included delete-account example.
  • Replace the account copy and confirmation handler after installation while keeping separate Cancel and destructive confirmation actions.
  • Use AlertDialog for the decision boundary; use Dialog or an inline Alert when the user is not confirming an irreversible action.

Motion

  • The recipe adds no motion and retains the native AlertDialog transition.
  • Reduced motion behavior is inherited from AlertDialog and the global motion provider.

Accessibility

  • AlertDialog traps focus, names the decision and restores focus to the trigger when it closes.
  • Keep the consequence in the description and keep Cancel available before the destructive action.

Implementation Guidance

  • Install with pnpm dlx shadcn@4.16.1 add @siteplane/destructive-confirmation.
  • Adapt only the resource name, consequence text and confirmed action.
  • Use this ready-made recipe only when the request explicitly asks for the complete pattern and its built-in result state. Compose product-specific deletion actions such as deleting a workspace directly from Alert Dialog and Button.
  • Do not use a destructive confirmation for a reversible or informational event.

Registry

Source Contract

Registry item: destructive-confirmation

Files

  • src/components/patterns/destructive-confirmation.tsx to components/patterns/destructive-confirmation.tsx

Registry dependencies: @siteplane/base, @siteplane/alert-dialog, @siteplane/button

On This Page