Shadcn.io is not affiliated with official shadcn/ui
Loading Button
An outline button showing loading state with animated spinner for async secondary operations
Even secondary actions load—outlines need progress feedback. This React outline button combines shadcn/ui's border-only styling with lucide-react's Loader2 spinner and disabled state showing async operation progress. Built with animate-spin rotation and gap-2 spacing maintaining bordered visual weight during operations, it prevents double-clicks while providing clear feedback within secondary action contexts. Perfect for "Refresh Data" in dashboard cards triggering background updates, "Load More Comments" in social feeds fetching additional content, or "Export CSV" in data tables processing file generation—the loading state provides feedback without the visual prominence of filled button spinners.
Loading Button preview
Installation
Related Components
Standard Outline
Basic border button without loading
Outline with Icon
Static icon on border button
Loading Primary
Loading state on filled button
Loading Link
Loading state on minimal button
Outline with Count
Border button with badge
Toast Notification
Success feedback component
FAQ
Was this page helpful?
Sign in to leave feedback.