# Button Group

> Visually groups buttons by merging their borders.

Source: https://ngwr.dev/reference/components/button-group  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrButtonGroup } from 'ngwr/button';

@Component({ imports: [WrButton, WrButtonGroup] })
export class MyComponent {}
```

## Basic usage

```html
<wr-btn-group>
  <button wr-btn>Left</button>
  <button wr-btn>Middle</button>
  <button wr-btn>Right</button>
</wr-btn-group>
```

## Colored

```html
<wr-btn-group>
  <button wr-btn color="primary">Save</button>
  <button wr-btn color="primary">Save & Continue</button>
</wr-btn-group>
```

## Segmented control

Use color to highlight the active option.

```html
<wr-btn-group>
  <button wr-btn [color]="align() === 'left' ? 'primary' : null" (click)="align.set('left')">Left</button>
  <button wr-btn [color]="align() === 'center' ? 'primary' : null" (click)="align.set('center')">Center</button>
  <button wr-btn [color]="align() === 'right' ? 'primary' : null" (click)="align.set('right')">Right</button>
</wr-btn-group>
```

## Shape

`shape` on the group enforces a corner treatment across every child `<wr-btn>` — child `[shape]` inputs are ignored so the group reads as one coherent control.

```html
<wr-btn-group shape="rounded">
  <button wr-btn>One</button>
  <button wr-btn>Two</button>
  <button wr-btn>Three</button>
</wr-btn-group>

<wr-btn-group shape="pill">
  <button wr-btn>One</button>
  <button wr-btn>Two</button>
  <button wr-btn>Three</button>
</wr-btn-group>

<!-- Group shape wins over child [shape] -->
<wr-btn-group shape="pill">
  <button wr-btn>Forced</button>
  <button wr-btn shape="rounded">Pill anyway</button>
</wr-btn-group>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `shape` | Enforced corner treatment for every child `<wr-btn>`. Child `[shape]` is ignored when set on the group. `null` (default) leaves children alone. | `'rounded' \| 'pill' \| null` | `null` |