Shadcn.io is not affiliated with official shadcn/ui
Loading Button
A destructive button displaying loading state with animated spinner preventing double-clicks during async deletion
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.
Loading Button preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.