Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Advanced

Split Button with Dropdown Button Group for React

Split buttons for Fork and Star, each a main action joined to a chevron that opens a menu of related actions.

Framework
UI library

A split button: one click runs the main action, and the chevron next to it opens the variations. Fork offers Create a fork and View existing forks; Star offers Add to list and View starred. The menus open aligned to the chevron's end.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the chevron joined to Fork?

Fork is a Button, and the chevron is a second outline Button that is the menu's trigger, both inside one ButtonGroup. DropdownMenuTrigger passes the button in render.

What does each menu list?

Fork lists Create a fork and View existing forks. Star lists Add to list and View starred.

How does the menu line up with the chevron?

It opens below and aligned to the end. DropdownMenuContent sets align to end.

How is the chevron button named?

With an aria-label, More fork options or More star options. The icon has aria-hidden="true".

Do the menu items do anything?

No. The items and the Fork and Star buttons have no handler. Put the action on the button or the item you want to run.

Which component opens the menu?

Dropdown Menu. ButtonGroup only shares the border between the main button and the trigger.

All 39 button group examples