---
layout: docs
title: Button group
description: Group a series of buttons together on a single line or stack them in a vertical column.
group: components
toc: true
---
## Basic example
Wrap a series of buttons with `.btn` in `.btn-group`.
{{< example >}}
{{< /example >}}
{{< callout info >}}
Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them.
{{< /callout >}}
These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs-tabs" >}}).
{{< example >}}
{{< /example >}}
## Outlined styles
{{< example >}}
{{< /example >}}
## Checkbox and radio button groups
Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group.
{{< example >}}
{{< /example >}}
{{< example >}}
{{< /example >}}
## Button toolbar
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
{{< example >}}
{{< /example >}}
Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
{{< example >}}
@
@
{{< /example >}}
## Sizing
Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
{{< example >}}
{{< /example >}}
## Nesting
Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
{{< example >}}
{{< /example >}}
## Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
{{< example >}}