React Button Group - File Operations
A button group for file management actions with Download, Share, Edit, and Delete operations in unified controls
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
File actions repeat constantly—grouping them accelerates workflows. This React button group combines shadcn/ui's Button and ButtonGroup components with Lucide React's DownloadIcon, Share2Icon, Edit2Icon, and Trash2Icon for cohesive file management toolbars. Built on Radix UI with outline variant buttons using size="sm" for compact control bars, the pattern provides both icon-with-text and icon-only variations for flexible file operation interfaces. Perfect for cloud storage applications where users manage documents rapidly, media galleries offering quick file actions, document management systems requiring consistent operation controls, or any file interface where actions should feel grouped and accessible—button groups unify operations, file icons communicate functions clearly.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-actions-2.jsonRelated patterns you will also like
Bulk Actions
Multi-item operation controls
Social Actions
Engagement control groups
Destructive Button
Delete and remove actions
File Context Menu
Right-click file operations
Outline Button
Border-style button variant
Dialog Component
Modal confirmation dialogs
Questions you might have
React Button Group - Social Actions
A button group for social engagement actions with Like, Comment, and Share controls in unified layouts
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