A two-step danger row that expands in place into a warning with marching hazard stripes, a list of consequences and a checkbox. The final button stays locked until the user acknowledges.
npx shadcn@latest add https://hyperblur.dev/r/button-irreversible.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-irreversible.tsx.
import { ButtonIrreversible } from "@/components/hyperblur/button-irreversible"
<ButtonIrreversible onConfirm={deleteAccount} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Delete account" | Row title in the first step. |
| description | string | "Remove your workspace, files and billing history" | Row subtitle in the first step. |
| title | string | "This can't be undone" | Row title in the second step. |
| consequences | string[] | [two items] | What will happen, one line each. |
| acknowledge | string | "I understand this is permanent" | Checkbox label that unlocks the final button. |
| confirmLabel | string | "Delete permanently" | Final button label. |
| cancelLabel | string | "Cancel" | Cancel button label. |
| doneLabel | string | "Account scheduled for deletion" | Message after confirming. |
| open | boolean | undefined | Controlled open state of the second step. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | undefined | Called when the second step opens or closes. Escape closes it. |
| onConfirm | () => void | undefined | Called by the final button. |
| onCancel | () => void | undefined | Called by Cancel, Escape or collapsing the row. |
| accent | string | "#ef4444" | Danger color used for fills, glows and the focus ring. |
| resetAfter | number | 3000 | Milliseconds before the finished state returns to the start. Use 0 to keep the finished state. |
| disabled | boolean | false | Blocks every interaction and dims the control. |