ButtonGroup

Groups related Buttons and propagates shared size, disabled state, and orientation to child Buttons.

Examples

Horizontal

Align left

Align center

Align right

<ButtonGroup {...args}>
  <Button icon={AlignLeft} isIconOnly label="Align left" />
  <Button icon={AlignCenter} isIconOnly label="Align center" />
  <Button icon={AlignRight} isIconOnly label="Align right" />
</ButtonGroup>

Vertical

CopyPasteDelete

<ButtonGroup {...args}>
  <Button label="Copy" />
  <Button label="Paste" />
  <Button label="Delete" variant="destructive" />
</ButtonGroup>

Sizes

OneTwo

OneTwo

OneTwo

<div style={{display: 'flex', alignItems: 'center', gap: 16}}>
  <ButtonGroup label="Small actions" size="sm">
    <Button label="One" />
    <Button label="Two" />
  </ButtonGroup>
  <ButtonGroup label="Medium actions" size="md">
    <Button label="One" />
    <Button label="Two" />
  </ButtonGroup>
  <ButtonGroup label="Large actions" size="lg">
    <Button label="One" />
    <Button label="Two" />
  </ButtonGroup>
</div>

Disabled

ApproveReject

<ButtonGroup {...args}>
  <Button label="Approve" />
  <Button label="Reject" />
</ButtonGroup>

Mixed Variants

Save draftDiscard

<ButtonGroup {...args}>
  <Button label="Save draft" variant="secondary" />
  <Button label="Discard" variant="destructive" />
</ButtonGroup>

Disabled Vertical

CopyPasteDelete

<ButtonGroup {...args}>
  <Button label="Copy" />
  <Button label="Paste" />
  <Button label="Delete" variant="destructive" />
</ButtonGroup>

Link Buttons

HomeAboutContact

<ButtonGroup {...args}>
  <Button href="/home" label="Home" />
  <Button href="/about" label="About" />
  <Button href="/contact" label="Contact" />
</ButtonGroup>

Large Group

FirstPrev123NextLast

<ButtonGroup {...args} label="Pagination">
  <Button label="First" />
  <Button label="Prev" />
  <Button label="1" />
  <Button label="2" />
  <Button label="3" />
  <Button label="Next" />
  <Button label="Last" />
</ButtonGroup>

With Dropdown Menu

CopyCut

More

RenameArchive

Delete

<ButtonGroup {...args}>
  <Button icon={Copy} label="Copy" />
  <Button icon={Scissors} label="Cut" />
  <DropdownMenu
    button={{label: 'More'}}
    items={[
      {icon: Edit, label: 'Rename'},
      {icon: Archive, label: 'Archive'},
      {type: 'divider'},
      {icon: Trash2, label: 'Delete'},
    ]}
  />
</ButtonGroup>

Vertical Icon Only

Bold

Italic

Underline

<ButtonGroup {...args}>
  <Button icon={Bold} isIconOnly label="Bold" />
  <Button icon={Italic} isIconOnly label="Italic" />
  <Button icon={Underline} isIconOnly label="Underline" />
</ButtonGroup>

API

ButtonGroup

Groups related Buttons and propagates shared size, disabled state, and orientation to child Buttons.

Prop	Type	Default	Description
children*	ReactNode	—	Direct children should be <Button> elements.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
isDisabled	boolean	—	Whether all buttons in the group are disabled.
label*	string	—	Accessible label for the group.
orientation	"horizontal" | "vertical"	—	Orientation for layout. Default is horizontal.
ref	Ref<HTMLDivElement>	—	Ref forwarded to the root element.
size	"sm" | "md" | "lg"	—	Default size for Buttons in the group. Individual Buttons can override it.
style	CSSProperties	—	Inline styles applied to the root element.