synthetic

ButtonGroup

A joined row or column of equal buttons.

Calendar rangeThree equal, always-visible choices

Vertical

Disabled

Small

Full width

In context

Project headerView switcher and actions

Tideline mobile

Offline tasks and a quiet inbox for the crew.

Props

Prop	Type	Required	Default
`children`	`ReactNode`	Yes	—
`orientation`	`"horizontal" \| "vertical" \| undefined`	No	horizontal

Sizing

ButtonGroup never overrides its children's props; it only joins them visually. Set size and variant on each Button. The root is inline-flex; to fill a container pass style={{ display: "flex" }} and flex: 1 on the buttons.

<ButtonGroup style={{ display: "flex" }}>
  <Button variant="secondary" style={{ flex: 1 }}>Day</Button>
  <Button variant="secondary" style={{ flex: 1 }}>Week</Button>
</ButtonGroup>

data-rebar-* attributes

data-rebar-component="button-group", data-rebar-orientation="horizontal" | "vertical" on the root.

Migrating to Ant Design

AntD's Button.Group (or Space.Compact) is a close direct equivalent.