Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Loading Button
A link-styled button showing loading state with animated spinner for async operations
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Links trigger actions too—fetching data, submitting forms, calling APIs. This React link button combines shadcn/ui's minimal link variant with lucide-react's Loader2 spinner and disabled state showing async progress. Built with animate-spin rotation and gap-2 spacing maintaining link styling during operations, it prevents double-clicks while keeping subtle visual weight. Perfect for "Load More" pagination triggering API calls, "Refresh Data" in dashboards fetching updates, or "Send Verification Email" awaiting confirmation—the loading state provides feedback without the visual prominence of filled button spinners.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Standard Link
Basic link without loading state
Link with Icon
Static icon on link button
Loading Primary
Loading state on filled button
Loading Outline
Loading state on bordered button
Link with Count
Link button with badge
Toast Notification
Success feedback component