Button Group

Joins related Buttons into one row that shares borders.

When to use

Use when: A few related actions that belong together, such as a split button or segmented actions.
Avoid when: The buttons select a value; use Toggle Group.

Installation

bunx shelf add button-group

The source lands in src/components/ui/button-group.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";

<ButtonGroup aria-label="Invoice actions">
  <Button variant="outline">Archive</Button>
  <Button variant="outline">Report</Button>
</ButtonGroup>

Examples

Split button

A main action with a menu of related ones.

Sizes

Buttons in a group should share one size.

Built on

Packages: @stylexjs/stylex
Shelf items: utils
Figma: In progress. See Designers and Figma.