Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Spinner - Loading Icon Button
A React icon button showing only a spinner during loading state using disabled and size icon props without text labels
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Icon buttons are compact—but how do users know an icon button is loading? This React icon button replaces icon with Spinner during loading. Built with shadcn/ui Button size icon and Spinner component, the square button shows only spinner—perfect for toolbar actions, compact UIs, icon-only controls like refresh or sync, minimal interfaces, or any icon button triggering async operations where space is limited and text labels don't fit but loading feedback is still essential.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Loading Button
Button with spinner and text
Loading Outline Button
Outline button with spinner
Icon Button
Icon button without spinner
Loading Small Button
Small button with spinner
Inline Spinner
Spinner with text
Standard Button
Standard button
Questions you might have
React Spinner - Loading Outline Button
A React outline button showing loading state with spinner and Processing text using disabled and variant outline props
React Spinner - Loading Secondary Button
A React secondary button showing loading state with spinner and Saving Changes text using disabled and variant secondary props