Docs

Button Group

Use the button-group shortcode to display a group of buttons.
Overview   Tab List   Styling   Arguments  

Overview  

Use the button-group shortcode to display a group of buttons. Add inner <button> elements for each Button Component . As an example, the following shortcode displays a group of three buttons. See the Button Component for additional styling options.

Left Middle Right
markdown 
{{< button-group aria-label="Basic example" >}}
  {{< button color="primary" href="#!" >}}Left{{< /button >}}
  {{< button color="primary" href="#!" >}}Middle{{< /button >}}
  {{< button color="primary" href="#!" >}}Right{{< /button >}}
{{< /button-group >}}

Tab List  

Added in v2.7.0     

Set aria-role="tablist" to use the button group as a Bootstrap tab navigation control. The default role is group.

Cards List
markdown 
{{< button-group aria-label="View toggle" aria-role="tablist" >}}
  {{< button color="primary" outline="true" href="#!" >}}Cards{{< /button >}}
  {{< button color="primary" outline="true" href="#!" >}}List{{< /button >}}
{{< /button-group >}}

Styling  

Check the Bootstrap documentation  for additional styling options.

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
aria-label string Alias for label.
aria-role string group v2.7.0      ARIA role attribute for the element (distinct from the person-role role argument). Defaults to “group”; set to “tablist” for tab-switching button groups.
label string Assistive label of the element.
Name Type Required Default
aria-label string
Alias for label.
aria-role string group
v2.7.0      ARIA role attribute for the element (distinct from the person-role role argument). Defaults to “group”; set to “tablist” for tab-switching button groups.
label string
Assistive label of the element.
On this page