Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes interfaces are cramped—tables, toolbars, cards—and standard buttons feel too large. This React small button shows size-3 Spinner with Please Wait text in compact sizing. Built with shadcn/ui Button size sm and sized Spinner, the reduced padding and smaller spinner fit tight spaces—perfect for table row actions, compact toolbars, inline operations, card actions, dense UIs, or any loading button where vertical space is limited and standard button size would overwhelm the layout.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Loading Button
Standard size button with spinner
Loading Icon Button
Icon-only compact button with spinner
Standard Button
Standard size button
Loading Outline Button
Outline button with spinner
Inline Spinner
Spinner with text
Table Actions
Action buttons in tables
Questions you might have
React Spinner - Loading Secondary Button
A React secondary button showing loading state with spinner and Saving Changes text using disabled and variant secondary props
React Spinner - Inline with Text
A React inline spinner with Loading data text using flexbox alignment and gap spacing built with shadcn/ui Spinner component