Shadcn.io is not affiliated with official shadcn/ui
Loading Button
Button with built-in loading spinner and state management for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Loading Button preview
Finally, a loading button that just works. Pass loading= and it shows a spinner, disables itself, and swaps the text—all automatically. No more juggling disabled states and conditional icons. The spinner matches your text color and the transition is smooth. Perfect for form submissions, API calls, or any async action. When loading completes, it snaps back instantly. One prop, zero hassle. 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 loading-button button into my projectRelated Components
Copy Button
Clipboard with feedback
Success Button
Success checkmark state
GitHub Stars Button
Live GitHub star count
Counter Button
Animated increment
Shake Button
Triggered error shake
Input Button
Expanding input field
FAQ
Was this page helpful?
Sign in to leave feedback.
Liquid Button
Liquid fill button with fluid animation that floods from bottom on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Long Press Button
Button that requires a press-and-hold gesture to confirm, with a progress fill that animates while held for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.