Skip to content

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

Free

Split Button with Dropdown Button Group for Ark UI

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, Ark 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>
    <Menu positioning={{ placement: "bottom-end" }}>
      <MenuTrigger asChild>
        <Button
          aria-label="More fork options"
          className="px-2"
          variant="outline"
        >
          <ChevronDownIcon aria-hidden="true" />
        </Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItem value="create-fork">Create a fork</MenuItem>
        <MenuItem value="view-forks">View existing forks</MenuItem>
      </MenuContent>
    </Menu>
  </ButtonGroup>
  <ButtonGroup aria-label="Star">
    <Button variant="outline">
      <StarIcon aria-hidden="true" data-icon="inline-start" />
      Star
    </Button>
    <Menu positioning={{ placement: "bottom-end" }}>
      <MenuTrigger asChild>
        <Button
          aria-label="More star options"
{/* 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. MenuTrigger uses asChild so the trigger is that button.

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. Menu sets positioning with the placement bottom-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.

Menu

Sets positioning, placement, bottom-end, asChild, value="create-fork" and value="view-forks". The rest is on the Menu page.

All 39 button group examples