10 KiB
| layout | title | description | group | toc |
|---|---|---|---|---|
| docs | Button group | Group a series of buttons together on a single line or stack them in a vertical column. | components | true |
Basic example
Wrap a series of buttons with .btn in .btn-group.
{{< 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 >}}Mixed styles
{{< example >}}
Outlined styles
{{< 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 >}}
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 >}}
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 >}}
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 >}}
Nesting
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
{{< example >}}
Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
{{< example >}}
{{< example >}}
{{< example >}}