Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Spinner - Loading Button
A React button showing loading state with spinner and Loading text using disabled prop built with shadcn/ui Button component
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Users click submit buttons wondering if the click registered or the app froze. This React button shows Spinner with Loading text in disabled state preventing double-clicks. Built with shadcn/ui Button with Spinner component, it's perfect for form submissions, API calls, async operations, save actions, or any button triggering async work where users need visual confirmation their action is processing not stuck preventing anxious repeated clicks.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Loading Button with Icon
Button with spinner and icon
Icon Loading Button
Icon-only button with spinner
Inline Spinner
Spinner with inline text
Standard Button
Basic button without spinner
Spinner in Input
Input with spinner addon
Form with Submit
Form with submit button
Questions you might have
React Spinner in Empty State
A React full-page loading state with spinner title description and cancel button using Empty component built with shadcn/ui
React Spinner - Loading Outline Button
A React outline button showing loading state with spinner and Processing text using disabled and variant outline props