63cd4e96b3
While `placeholder` is nominally valid per spec http://rawgit.com/w3c/html-api-map/master/index.html#accessible-name-and-description-calculation it is inelegant, a fallback, and not supported in ios/safari/voiceover and android/chrome/talkback, to name a few combinations `aria-describedby` is also not really the right tool for providing a name/label equivalent, so remove that from the list of possible alternative methods / clarify how it can be used
8.8 KiB
| layout | title | description | group |
|---|---|---|---|
| docs | Button group | Group a series of buttons together on a single line with the button group, and super-power them with JavaScript. | components |
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/components/buttons/#button-plugin).
Contents
- Will be replaced with the ToC, excluding the "Contents" header {:toc}
Basic example
Wrap a series of buttons with .btn in .btn-group.
{% example html %}
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 html %}
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 html %}
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.
{% highlight html %}
Nesting
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
{% example html %}
Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
{% highlight html %}
Tooltips and popovers
Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. You'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).