Button Group

Container for grouping related buttons with merged borders and corners.

orientation

horizontal

vertical

#Installation

bunx --bun barefoot add button-group

#Usage

1import { Button } from "@/components/ui/button"2import { ButtonGroup } from "@/components/ui/button-group"34function ButtonGroupDemo() {5  return (6    <ButtonGroup>7      <Button variant="outline">Left</Button>8      <Button variant="outline">Center</Button>9      <Button variant="outline">Right</Button>10    </ButtonGroup>11  )12}

#Examples

#Separator

<ButtonGroup>
  <Button variant="outline">Save</Button>
  <ButtonGroupSeparator />
  <Button variant="outline" size="icon" aria-label="More options">
    <ChevronDownIcon />
  </Button>
</ButtonGroup>

#Vertical

<ButtonGroup orientation="vertical">
  <Button variant="outline">Profile</Button>
  <Button variant="outline">Settings</Button>
  <Button variant="outline">Logout</Button>
</ButtonGroup>

#With Text

<ButtonGroup>
  <Button variant="outline" size="icon" aria-label="Decrease">
    <MinusIcon />
  </Button>
  <ButtonGroupText>
    <span>1</span>
  </ButtonGroupText>
  <Button variant="outline" size="icon" aria-label="Increase">
    <PlusIcon />
  </Button>
</ButtonGroup>

#API Reference

ButtonGroup

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	The layout direction of the button group.
children	Child	-	The buttons to group together.

ButtonGroupText

Prop	Type	Default	Description
asChild	boolean	false	Render child element instead of <div>.
children	Child	-	The text content to display.

ButtonGroupSeparator

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'vertical'	The separator direction.