# Button Group

Use the button-group shortcode to display a group of buttons.

## Overview

Use the `button-group` shortcode to display a group of buttons. Add inner `<button>` elements for each [button component](button). As an example, the following shortcode displays a group of three buttons. See the [button component](button) for additional styling options.

```markdown
{{< button-group aria-label="Basic example" >}}
  {{< button color="primary" href="#!" >}}Left{{< /button >}}
  {{< button color="primary" href="#!" >}}Middle{{< /button >}}
  {{< button color="primary" href="#!" >}}Right{{< /button >}}
{{< /button-group >}}
```

### Tab list

Added in v2.7.0

Set `aria-role="tablist"` to use the button group as a Bootstrap tab navigation control. The default role is `group`.

```markdown
{{< button-group aria-label="View toggle" aria-role="tablist" >}}
  {{< button color="primary" outline="true" href="#!" >}}Cards{{< /button >}}
  {{< button color="primary" outline="true" href="#!" >}}List{{< /button >}}
{{< /button-group >}}
```

## Styling

Check the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/button-group/#css) for additional styling options.

## Arguments

The shortcode supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `aria-label` | string |  |  | Alias for label. |
| `aria-role` | string |  | `group` | ARIA role attribute for the element (distinct from the person-role `role` argument). Defaults to "group"; set to "tablist" for tab-switching button groups. |
| `label` | string |  |  | Assistive label of the element. |