Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Loading Button
An outline button showing loading state with animated spinner for async secondary operations
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel