# Button Group

> Source: https://design.nanatec.co.ke/components/button-group/
> Groups related `nana-button` elements into a single visual unit — joined together (the default) or evenly spaced. Optionally propagates a shared `size` and `variant` to every button so they stay consistent.

Groups related `nana-button` elements into a single visual unit — joined together (the default) or evenly spaced. Optionally propagates a shared `size` and `variant` to every button so they stay consistent.

## Preview

```html
<nana-button-group>
  <nana-button>Left</nana-button>
  <nana-button>Middle</nana-button>
  <nana-button>Right</nana-button>
</nana-button-group>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/button-group";
```

## Basic usage

```html
<nana-button-group>
  <nana-button>Left</nana-button>
  <nana-button>Middle</nana-button>
  <nana-button>Right</nana-button>
</nana-button-group>
```

## API

## Slots

| Slot | Description |
|---|---|
| `(default)` | One or more `nana-button` elements |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-button-group-radius` | — | Corner radius of the joined group |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The group container |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/button/">Button</a></li>
  <li><a href="/components/icon-button/">Icon Button</a></li>
  <li><a href="/components/input/">Input</a></li>
  <li><a href="/components/textarea/">Textarea</a></li>
  <li><a href="/components/range/">Range</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-button-group--docs