Click starts a simulated download. A fill bar and percentage run inside the button and it ends on Done with a drawn check.
brand-kit-v2.zip
48.2 MB, updated 3 days ago
npx shadcn@latest add https://hyperblur.dev/r/button-download-progress.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-download-progress.tsx.
import { ButtonDownloadProgress } from "@/components/hyperblur/button-download-progress"
<ButtonDownloadProgress duration={3200} onComplete={() => console.log("done")}>Download</ButtonDownloadProgress>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Download" | Button label. |
| duration | number | 3200 | Length of the simulated download in milliseconds. |
| progressLabel | ReactNode | "Downloading" | Small label shown next to the percentage. |
| doneLabel | ReactNode | "Done" | Label shown with the check at the end. |
| resetAfter | number | 2200 | Milliseconds the Done state stays before the button resets. |
| onComplete | () => void | Called when the progress reaches 100%. Start the real file download in onClick. | |
| variant | "outline" | "solid" | "outline" | Dark button with an accent fill or an accent button with a brighter fill. |
| accent | string | "#2f7bff" | Accent color used for the focus ring, highlights and the solid variant. |
| size | "sm" | "md" | "lg" | "md" | Font size and padding preset. |
| disabled | boolean | false | Disables the button and dims it. |