A button that collapses into a thin progress bar on click, with the status and percentage riding above it. At 100 percent it grows back into a success pill and draws a check.
Ready to ship v2.14.0
7 commits · checks passed
npx shadcn@latest add https://hyperblur.dev/r/loader-button-progress.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-button-progress.tsx.
import { LoaderButtonProgress } from "@/components/hyperblur/loader-button-progress"
<LoaderButtonProgress label="Deploy" onStart={deploy} value={progress} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Deploy" | Text of the idle button. |
| busyLabel | string | "Deploying" | Status shown above the bar while working. |
| doneLabel | string | "Deployed" | Text of the success pill. |
| value | number | Controlled progress from 0 to 100 while busy. At 100 the button turns to success. Leave it out for a timed run. | |
| duration | number | 3400 | Milliseconds of the timed run when value is not set. |
| resetAfter | number | 2200 | Milliseconds before the success pill returns to idle. 0 keeps it. |
| autoPlay | boolean | false | Starts the run by itself and loops, for previews. |
| width | number | 220 | Width of the button in pixels. |
| accent | string | "#2f7bff" | Color of the progress fill, the percentage and the focus ring. |
| success | string | "#3ecf8e" | Color of the success pill. |
| onStart | () => void | Called when the run starts. | |
| onComplete | () => void | Called when progress reaches 100. |