Skip to content

Latest commit

 

History

History
248 lines (212 loc) · 10.5 KB

button-group.md

File metadata and controls

248 lines (212 loc) · 10.5 KB
Raw
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 >}}

Left Middle Right
{{< /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 >}}

Left Middle Right
{{< /example >}}

Outlined styles

{{< example >}}

Left Middle Right
{{< /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 >}}

Checkbox 1 Checkbox 2 Checkbox 3
{{< /example >}}

{{< example >}}

Radio 1 Radio 2 Radio 3
{{< /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 >}}

1 2 3 4
5 6 7
8
{{< /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 >}}

1 2 3 4
@
1 2 3 4
@
{{< /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 >}}

Left Middle Right

Left Middle Right

Left Middle Right
{{< /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 >}}

Button Button Button Button
{{< /example >}}

{{< example >}}

{{< /example >}}

{{< example >}}

Radio 1 Radio 2 Radio 3
{{< /example >}}