Actions

Button group

Joins buttons, inputs and selects into one pill, squaring the inner corners. Nest groups to space them.

packages/design-system/components/ui/button-group.tsx

Examples

Horizontal
Vertical
https://
With text and an input
Split button, with a separator
Nested groups space themselves

Anatomy

  1. 01Group, role="group"
  2. 02Children with data-slot, corners squared inside
  3. 03Optional separator
  4. 04Optional text cell

Usage

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@repo/design-system/components/ui/button-group";

<ButtonGroup>
  <Button variant="outline">Day</Button>
  <Button variant="outline">Week</Button>
  <Button variant="outline">Month</Button>
</ButtonGroup>

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Which corners are squared and which border collapses.
ButtonGroupSeparator orientation"horizontal" | "vertical""vertical"A hairline between solid buttons, where borders do not show.
ButtonGroupText renderReactElementnoneA muted label cell, rendered as a div unless you pass another element.
classNamestringnoneMerged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Do

  • Group actions that act on the same thing.
  • Use outline buttons so the joins show.

Don't

  • Use it for a single choice between options. That is a toggle group.