From c1d5a801b4bc66e3866f815be00e11d1b20d3539 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:36 +0200 Subject: Adding upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- site/content/docs/5.3/components/button-group.md | 252 +++++++++++++++++++++++ 1 file changed, 252 insertions(+) create mode 100644 site/content/docs/5.3/components/button-group.md (limited to 'site/content/docs/5.3/components/button-group.md') diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md new file mode 100644 index 0000000..9c63562 --- /dev/null +++ b/site/content/docs/5.3/components/button-group.md @@ -0,0 +1,252 @@ +--- +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 >}} +
+ Active link + Link + Link +
+{{< /example >}} + +## Mixed styles + +{{< 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 >}} +
+ + + + + + +
+{{< /example >}} + +{{< example >}} +
+ + +
+ + +
+ + +
+ + +
+
+ + +
+
+ + +
+
+{{< /example >}} + +{{< example >}} +
+ + + + + + +
+{{< /example >}} -- cgit v1.2.3