# Button group · MIAN

Joins related buttons into one control, horizontally or vertically.

- Id: `button-group` · Category: Actions · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/button-group
- Use for: joined buttons, segmented buttons, split button, toolbar buttons.
- Alternatives: toggle-group.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-btn-group`: Container. Merges the radii of its children.
- `mn-btn-group-vertical`: Stacks the buttons.

## Accessibility

- Wrap with role="group" and an aria-label so the relationship is announced.
- For a single-choice toggle use Toggle group instead.

## Examples

### Outline group

```html
<div class="mn-btn-group" role="group" aria-label="Pagination">
  <button class="mn-btn mn-btn-outline">Previous</button>
  <button class="mn-btn mn-btn-outline">Today</button>
  <button class="mn-btn mn-btn-outline">Next</button>
</div>
```

### Split button

```html
<div class="mn-btn-group" role="group" aria-label="Save">
  <button class="mn-btn">Save changes</button>
  <button class="mn-btn mn-btn-icon" aria-label="More save options" popovertarget="split-menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
</div>
<div class="mn-menu" popover id="split-menu" data-placement="bottom-end">
  <button class="mn-menu-item">Save as draft</button>
  <button class="mn-menu-item">Save and publish</button>
</div>
```

### Vertical

```html
<div class="mn-btn-group mn-btn-group-vertical" role="group" aria-label="Zoom">
  <button class="mn-btn mn-btn-outline mn-btn-icon" aria-label="Zoom in"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
  <button class="mn-btn mn-btn-outline mn-btn-icon" aria-label="Zoom out"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/></svg></button>
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/button-group/source