Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Loading Button
A destructive button displaying loading state with animated spinner preventing double-clicks during async deletion
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Deletions take time—databases update, files purge, APIs respond. This React button combines shadcn/ui's destructive variant with lucide-react's Loader2 icon and disabled state to show async progress. Built with animate-spin className creating continuous rotation and gap-2 spacing the spinner from text, it prevents race conditions and double submissions. Perfect for delete operations calling backend APIs, bulk removal processing multiple items, or account terminations awaiting confirmation—the loading state reassures users the dangerous action is processing while blocking premature re-clicks.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Standard Destructive
Basic delete button without loading
Destructive with Icon
Static icon on destructive
Loading Primary
Loading state on primary button
Destructive Dialog
Confirmation before dangerous action
Destructive with Count
Badge showing affected items
Toast Component
Deletion success feedback