React Button Group - Split Button with Dropdown
A split button pattern combining primary action buttons with dropdown menus for related secondary actions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Primary actions need variants—split buttons provide both. This React component combines shadcn/ui's Button, ButtonGroup, and DropdownMenu components with Lucide React's GitForkIcon, StarIcon, and ChevronDownIcon for sophisticated action controls with option menus. Built on Radix UI with outline variant buttons and px-2 compact dropdown triggers, the pattern delivers one-click primary actions alongside chevron-triggered secondary options. Perfect for GitHub-style repository actions where Fork has creation variants, toolbar buttons offering mode variations, publishing interfaces with deployment options, or any action requiring both immediate execution and alternative methods—split buttons unify primary actions with contextual choices, dropdown chevrons signal additional options clearly.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-1.jsonRelated patterns you will also like
Basic Button Group
Simple grouped buttons
Dropdown Menu
Menu component patterns
Outline Button
Border-style button variant
Social Actions
Action button groups
Command Popover
Command menu patterns
Context Menu
Right-click menus