# Button Group

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<ButtonGroup> <Button variant="outline">{"Left"}</Button> <Button variant="outline">{"Middle"}</Button> <Button variant="outline">{"Right"}</Button> </ButtonGroup>
</div>

```astro
---
---

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>
```

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add button-group
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add button-group
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add button-group
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add button-group
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro nocollapse
---
---
<ButtonGroup>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
```

## Props

| Prop | Type | Default |
|---|---|---|
| <code>class</code> | `string` | `""` |

## Examples

### Orientation

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit"> <Button variant="outline" size="icon"> <PlusIcon /> </Button> <Button variant="outline" size="icon"> <MinusIcon /> </Button> </ButtonGroup>
</div>

```astro
---
---

<ButtonGroup orientation="vertical" aria-label="Media controls" class="h-fit">
  <Button variant="outline" size="icon">
    <PlusIcon />
  </Button>
  <Button variant="outline" size="icon">
    <MinusIcon />
  </Button>
</ButtonGroup>
```

### Size

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex flex-col items-start gap-8"> <ButtonGroup> <Button variant="outline" size="sm">{" Small "}</Button> <Button variant="outline" size="sm">{" Button "}</Button> <Button variant="outline" size="sm">{" Group "}</Button> <Button variant="outline" size="icon-sm"> <PlusIcon /> </Button> </ButtonGroup> <ButtonGroup> <Button variant="outline">{"Default"}</Button> <Button variant="outline">{"Button"}</Button> <Button variant="outline">{"Group"}</Button> <Button variant="outline" size="icon"> <PlusIcon /> </Button> </ButtonGroup> <ButtonGroup> <Button variant="outline" size="lg">{" Large "}</Button> <Button variant="outline" size="lg">{" Button "}</Button> <Button variant="outline" size="lg">{" Group "}</Button> <Button variant="outline" size="icon-lg"> <PlusIcon /> </Button> </ButtonGroup> </div>
</div>

```astro
---
---

<div class="flex flex-col items-start gap-8">
  <ButtonGroup>
    <Button variant="outline" size="sm">
      Small
    </Button>
    <Button variant="outline" size="sm">
      Button
    </Button>
    <Button variant="outline" size="sm">
      Group
    </Button>
    <Button variant="outline" size="icon-sm">
      <PlusIcon />
     </Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline">Default</Button>
    <Button variant="outline">Button</Button>
    <Button variant="outline">Group</Button>
    <Button variant="outline" size="icon">
      <PlusIcon />
    </Button>
  </ButtonGroup>
  <ButtonGroup>
    <Button variant="outline" size="lg">
      Large
    </Button>
    <Button variant="outline" size="lg">
      Button
    </Button>
    <Button variant="outline" size="lg">
      Group
    </Button>
    <Button variant="outline" size="icon-lg">
      <PlusIcon />
    </Button>
  </ButtonGroup>
</div>
```