> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Button Group

> Group multiple buttons with shared spacing and variants.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/button-group-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=3b34fe1b5982038911fa43ba640e6c97" alt="Button Group component preview (light)" width="240" data-path="images/ui/button-group-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/button-group.tsx`

## When to use

* Group related actions tightly with shared borders and spacing.
* Useful for segmented controls, filter bars, or adjacent actions.

## Usage

```tsx sabo/src/components/ui/button-group.tsx theme={null}
import {
  ButtonGroup,
  ButtonGroupText,
  ButtonGroupSeparator,
} from "@/components/ui/button-group";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <ButtonGroup>
      <Button variant="outline">Left</Button>
      <ButtonGroupSeparator />
      <Button variant="outline">Right</Button>
      <ButtonGroupText className="ml-2">More</ButtonGroupText>
    </ButtonGroup>
  );
}
```

## Key props

<ParamField path="orientation" type="string">
  <code>horizontal</code> (default) | <code>vertical</code>
</ParamField>

<ParamField path="ButtonGroupText.asChild" type="boolean">
  Render text wrapper as child element (useful for links).
</ParamField>

## Styling tip

* The group composes borders automatically; keep children border‑consistent (<code>variant="outline"</code> works well).
* Add separators with <code>ButtonGroupSeparator</code> to divide controls.

## Accessibility

* The container uses <code>role="group"</code>. Provide context with nearby labels or headings.