Join our Discord Community
Button Group/Actions

React Button Group - Bulk Actions

A button group for bulk operations on multiple items with Select All, Delete, Archive, and Move actions for efficient batch processing

Looking to implement shadcn/ui patterns?

Join our Discord community for help from other developers.


Managing multiple items individually wastes time—bulk actions transform workflows. This React button group combines shadcn/ui's Button and ButtonGroup components with Lucide React's CheckSquareIcon, Trash2Icon, ArchiveIcon, and FolderIcon for cohesive multi-item operation toolbars. Built on Radix UI with outline variant buttons using size="sm" for compact control bars, the pattern provides both icon-with-text and count-labeled variations for flexible batch operation interfaces. Perfect for email clients where users process messages in batches, file managers offering multi-select operations, task management systems enabling bulk updates, or any data interface where batch actions should feel grouped and powerful—button groups unify operations, count labels communicate scope clearly.

Loading preview...

Pattern created by @haydenbleasel

Installation

npx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-3.json
npx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-3.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-3.json
bunx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-3.json

Questions you might have