Patterns
Destructive Confirmation
A destructive account action with explicit cancellation, confirmation and result status.
Import
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-confirmationImport
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
DestructiveConfirmationfor 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.tsxto components/patterns/destructive-confirmation.tsx
Registry dependencies: @siteplane/base, @siteplane/alert-dialog, @siteplane/button