React Button Group - Loading States
Button group with individual loading states for async actions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Async operations require feedback—loading states communicate progress. This React component combines shadcn/ui's Button and ButtonGroup components for action buttons with per-button loading indication. Built on React useState tracking loading state per action, buttons show 'Copying...' text while disabled during async operations (simulated with setTimeout). Perfect for file operations in cloud storage showing upload/download progress, email clients with send/save draft actions, form submissions with multiple save options, or any interface with async grouped actions—individual loading states prevent button mashing, disabled state blocks conflicting operations, text change provides clear feedback. The pattern handles common async scenarios where multiple related actions might be triggered but only one should execute at a time.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-3.jsonRelated patterns you will also like
Contextual Toolbar
Text selection formatting
Action Group
CRUD operation buttons
Spinner Component
Loading indicators
Outline Button
Border-style button variant
Toast Component
Success/error notifications
Basic Button Group
Simple grouped buttons