Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Split Button with Dropdown Button Group for React

Split buttons for Fork and Star: the label runs the action, and the chevron opens a short menu.

Two split buttons. Fork sits beside a chevron named More fork options, with Create a fork and View existing forks. Star sits beside a chevron named More star options, with Add to list and View starred. The items do nothing.

Use a split button when one action is the default and the rest are variations. The menu is a Dropdown Menu. In React, Base UI does not run Fork or Star.

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

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div className="flex flex-col gap-4">
  <ButtonGroup aria-label="Fork">
    <Button variant="outline">
      <GitForkIcon aria-hidden="true" data-icon="inline-start" />
      Fork
    </Button>
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <Button
            aria-label="More fork options"
            className="px-2"
            variant="outline"
          />
        }
      >
        <ChevronDownIcon aria-hidden="true" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem>Create a fork</DropdownMenuItem>
        <DropdownMenuItem>View existing forks</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </ButtonGroup>
  <ButtonGroup aria-label="Star">
    <Button variant="outline">
      <StarIcon aria-hidden="true" data-icon="inline-start" />
      Star
    </Button>
    <DropdownMenu>
      <DropdownMenuTrigger
{/* The rest of the file is under Installation. */}

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.

API Reference

Button Group

Sets aria-label="Fork" and aria-label="Star". The rest is on the Button Group page.

Button

Sets variant="outline", aria-label="More fork options" and aria-label="More star options". The rest is on the Button page.

Dropdown Menu

Sets align="end". The rest is on the Dropdown Menu page.

All 39 button group examples