A pill button with a little bin whose lid tips open on hover. Clicking drops a sheet of paper inside, the lid slams with a squash and a counter badge pops up.
Jonas Meyer
Tue 14:02Your Figma trial ends in 3 days
npx shadcn@latest add https://hyperblur.dev/r/button-trash-lid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-trash-lid.tsx.
import { ButtonTrashLid } from "@/components/hyperblur/button-trash-lid"
<ButtonTrashLid onDelete={() => trash(fileId)}>Move to trash</ButtonTrashLid>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Move to trash" | Label before the click. |
| doneLabel | ReactNode | "In the trash" | Label after the paper lands. |
| onDelete | () => void | undefined | Called when the lid closes. |
| 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 | 2400 | 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. |