A red button sealed under a hazard-striped glass cover. The first press flips the cover up on its hinge, the second press within the time window confirms.
Removes 3 services, 12 env vars and the custom domain api.northwind.io.
npx shadcn@latest add https://hyperblur.dev/r/button-safety-cover.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-safety-cover.tsx.
import { ButtonSafetyCover } from "@/components/hyperblur/button-safety-cover"
<ButtonSafetyCover onConfirm={deleteProject}>Delete project</ButtonSafetyCover>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Delete project" | Label on the cover and the button. |
| armedLabel | ReactNode | "Press to confirm" | Label once the cover is open. |
| doneLabel | ReactNode | "Project deleted" | Label after the second press. |
| armTimeout | number | 4000 | Milliseconds the cover stays open before closing on its own. Use 0 to keep it open. |
| onArm | () => void | undefined | Called when the cover opens. |
| onConfirm | () => void | undefined | Called on the second press. |
| accent | string | "#e5383b" | Danger color used for fills, glows and the focus ring. |
| size | "sm" | "md" | "lg" | "md" | Height and font size preset. |
| resetAfter | number | 2600 | 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. |