Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Spinner - Loading Outline Button
A React outline button showing loading state with spinner and Processing text using disabled and variant outline props
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes primary buttons are too bold for every loading state—outline buttons provide subtle loading feedback. This React outline button shows Spinner with Processing text in disabled state. Built with shadcn/ui Button variant outline and Spinner component, the bordered style feels lighter—perfect for secondary actions, cancel operations with async work, less prominent forms, auxiliary saves, or any loading button where outline styling matches your design system and primary button would be too visually heavy.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Loading Button
Primary button with spinner and loading text
Loading Secondary Button
Secondary variant with spinner
Loading Icon Button
Icon-only button with spinner
Outline Button
Outline button without spinner
Loading Small Button
Small button with spinner
Inline Spinner
Spinner with inline text
Questions you might have
React Spinner - Loading Button
A React button showing loading state with spinner and Loading text using disabled prop built with shadcn/ui Button component
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