The button folds into a circle, a ring spins while the action runs, then closes, fills and draws a checkmark before opening back up with the result. Accepts an async handler.
Marcus Lee
Editor · joined March
npx shadcn@latest add https://hyperblur.dev/r/button-check-draw.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-check-draw.tsx.
import { ButtonCheckDraw } from "@/components/hyperblur/button-check-draw"
<ButtonCheckDraw onConfirm={() => api.removeMember(id)}>Remove member</ButtonCheckDraw>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Remove member" | Label before the click. |
| doneLabel | ReactNode | "Removed" | Label after the checkmark. |
| minDuration | number | 1100 | Minimum milliseconds the spinner shows, so fast actions still read. |
| onConfirm | () => void | Promise<unknown> | undefined | Called on click. If it returns a promise the ring spins until it settles; a rejection returns to the start. |
| accent | string | "#e5484d" | 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. |