Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Spinner - Loading Secondary Button
A React secondary button showing loading state with spinner and Saving Changes text using disabled and variant secondary props
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Forms need visual hierarchy—not all loading buttons should scream primary. This React secondary button shows Spinner with Saving Changes text in muted styling. Built with shadcn/ui Button variant secondary and Spinner component, the subtle gray background feels less prominent—perfect for auto-save actions, draft saves, secondary submissions, background operations, less critical async work, or any loading button where secondary variant matches action importance and primary would draw too much attention.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Loading Button
Primary button with spinner
Loading Outline Button
Outline variant with spinner
Secondary Button
Secondary button without spinner
Loading Small Button
Small button with spinner
Loading Icon Button
Icon button with spinner
Form
Form with buttons
Questions you might have
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
React Spinner - Loading Small Button
A React small button showing loading state with size-3 spinner and Please Wait text using disabled and size sm props