Press and hold to feed the label into a shredder slot while paper strips grow out of the bottom edge. Letting go early pulls the label back; finishing drops the strips and confirms.
payroll-export-oct.csv
2.4 MB · contains salary data
npx shadcn@latest add https://hyperblur.dev/r/button-hold-shred.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-hold-shred.tsx.
import { ButtonHoldShred } from "@/components/hyperblur/button-hold-shred"
<ButtonHoldShred onConfirm={() => purgeFile(id)}>Hold to shred</ButtonHoldShred>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Hold to shred" | Label shown before the hold completes. |
| doneLabel | ReactNode | "Shredded" | Label shown after the hold completes. |
| duration | number | 1300 | Milliseconds the button must be held. |
| strips | number | 14 | Number of paper strips under the button (4 to 24). |
| onConfirm | () => void | undefined | Called once when the hold completes. |
| accent | string | "#ef4444" | 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. |