React Button Group - Overflow Menu
Overflow menu button group combining primary actions with a dropdown for secondary options
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Action overflow prevents toolbar clutter—dropdown menus house secondary functions. This React component combines shadcn/ui's Button, ButtonGroup, and DropdownMenu components with Lucide React's MoreHorizontalIcon for action toolbars with overflow menus. Built on Radix UI with DropdownMenuTrigger and DropdownMenuContent, primary actions (Copy, Edit, Delete) remain visible while secondary actions (Duplicate, Archive, Export) hide in a dropdown. Perfect for data tables in admin dashboards managing row actions, file managers like Dropbox or Google Drive offering file operations, content management systems with article actions, or any interface where action density requires overflow—button groups unify primary actions, dropdown prevents toolbar sprawl, more icon signals additional options. The pattern balances action discoverability with interface density by keeping 2-4 most common actions visible while relegating less frequent operations to the overflow menu, reducing cognitive load and maintaining clean visual hierarchy.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-1.jsonRelated patterns you will also like
Action Group
CRUD operation buttons
Dropdown Menu
Menu with sub-items
Filter Chips
Multi-select filters
Outline Button
Border-style button variant
Data Table
Tabular data with actions
Basic Button Group
Simple grouped buttons