Button Group

<ButtonGroup>
<Button variant="outline">Left</Button>
<Button variant="outline">Center</Button>
<Button variant="outline">Right</Button>
</ButtonGroup>

Installation

npx bearnie add button-group

import ButtonGroup from "@/components/ui/button-group/ButtonGroup.astro";
import ButtonGroupSeparator from "@/components/ui/button-group/ButtonGroupSeparator.astro";
import ButtonGroupText from "@/components/ui/button-group/ButtonGroupText.astro";

Usage

import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui"

<ButtonGroup>
<Button variant="outline">Left</Button>
<Button variant="outline">Center</Button>
<Button variant="outline">Right</Button>
</ButtonGroup>

Examples

Vertical

<ButtonGroup orientation="vertical">
<Button variant="outline">Top</Button>
<Button variant="outline">Middle</Button>
<Button variant="outline">Bottom</Button>
</ButtonGroup>

Icon buttons

<ButtonGroup>
<Button variant="outline" iconOnly>
  <Bold />
</Button>
<Button variant="outline" iconOnly>
  <Italic />
</Button>
<Button variant="outline" iconOnly>
  <Underline />
</Button>
</ButtonGroup>

With separator

<ButtonGroup>
<Button>Save</Button>
<ButtonGroupSeparator />
<Button iconOnly>
  <ChevronDown />
</Button>
</ButtonGroup>

Split button

<ButtonGroup>
<Button variant="outline">
  <Copy slot="left-icon" />
  Copy
</Button>
<ButtonGroupSeparator />
<Button variant="outline" iconOnly>
  <ChevronDown />
</Button>
</ButtonGroup>

With input

<ButtonGroup>
<Input placeholder="Enter URL..." class="rounded-r-none" />
<Button variant="outline">Go</Button>
</ButtonGroup>

With text

https://

<ButtonGroup>
<ButtonGroupText>https://</ButtonGroupText>
<Input placeholder="lexingtonthemes.com" class="rounded-l-none border-l-0" />
</ButtonGroup>

<ButtonGroup>
<Button variant="secondary" iconOnly>
  <Bold />
</Button>
<Button variant="outline" iconOnly>
  <Italic />
</Button>
<Button variant="outline" iconOnly>
  <Underline />
</Button>
</ButtonGroup>

Sizes

<div class="flex flex-col gap-4">
<ButtonGroup>
  <Button variant="outline" size="sm">Small</Button>
  <Button variant="outline" size="sm">Group</Button>
</ButtonGroup>
<ButtonGroup>
  <Button variant="outline">Default</Button>
  <Button variant="outline">Group</Button>
</ButtonGroup>
<ButtonGroup>
  <Button variant="outline" size="lg">Large</Button>
  <Button variant="outline" size="lg">Group</Button>
</ButtonGroup>
</div>

Anatomy

ButtonGroup - Container with role="group" that connects child elements
ButtonGroupSeparator - Visual divider between buttons
ButtonGroupText - Styled text element matching button heights

Props

ButtonGroup

Prop	Type	Default	Description
orientation	horizontal \| vertical	horizontal	Layout direction
class	string	-	Additional CSS classes

ButtonGroupSeparator

Prop	Type	Default	Description
orientation	horizontal \| vertical	vertical	Separator direction
class	string	-	Additional CSS classes

ButtonGroupText

Prop	Type	Default	Description
size	xs \| sm \| default \| lg \| xl	default	Text container size
class	string	-	Additional CSS classes

Installation

Usage

Examples

Vertical

Icon buttons

With separator

Split button

With input

With text

Toolbar

Sizes

Anatomy

Props

ButtonGroup

ButtonGroupSeparator

ButtonGroupText