Shadcn.io is not affiliated with official shadcn/ui
Download Button
State-machine download button with a real progress fill, status icon swap, and auto-reset for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Download Button preview
Progress you can see. Pass state="downloading" and progress=0..100 and the button fills from left to right in real time — no separate progress bar competing for attention. The icon swaps from cloud to spinner to checkmark as the state moves through idle → downloading → complete. Auto-disables while downloading so users can't accidentally trigger a second request. Pairs naturally with fetch + ReadableStream progress events. Built on top of the shadcn Button so every variant and size you already use just works.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the download-button button into my projectRelated Components
Loading Button
Async loading state
Success Button
Success checkmark state
Copy Button
Clipboard with feedback
Counter Button
Animated increment
GitHub Stars Button
Live GitHub star count
Input Button
Expanding input field
FAQ
Was this page helpful?
Sign in to leave feedback.
Depth Button
Button with realistic 3D depth that presses down on click for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Flip Button
3D flip button with front/back states and spring animations for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.