Button Group (button_group)

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

🔗 External documentation.

ID Label Description Schema
label Role The group label. Visually hidden. Used with assistive technologies.
buttons Buttons An array of 'button' patterns. Or an array of arrays of 'button' patterns, if 'toolbar'variant. 
            id: button_group
label: 'Button Group'
description: 'Group a series of buttons together on a single line with the button group, and super-power them with JavaScript. '
homepage: 'https://getbootstrap.com/docs/4.6/components/button-group/'
variants:
    default:
        id: default
        label: Default
    vertical:
        id: vertical
        label: Vertical
        description: 'Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.'
    lg:
        id: lg
        label: Large
    sm:
        id: sm
        label: Small
slots:
    label:
        id: label
        label: Role
        description: 'The group label. Visually hidden. Used with assistive technologies.'
    buttons:
        id: buttons
        label: Buttons
        description: "An array of 'button' patterns. Or an array of arrays of 'button' patterns, if 'toolbar'variant."
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': button_group
            label: 'Basic example'
            buttons:
                -
                    '@component': button
                    '@variant': secondary
                    label: First
                -
                    '@component': button
                    '@variant': secondary
                    label: Second
                -
                    '@component': button
                    '@variant': secondary
                    label: Third

Default ( default )

First Second Third
<div aria-label="Basic example" class="btn-group" role="group"> <span class="btn-secondary btn">First</span> <span class="btn-secondary btn">Second</span> <span class="btn-secondary btn">Third</span> </div>

Vertical ( vertical )

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

First Second Third
<div aria-label="Basic example" class="btn-group-vertical" role="group"> <span class="btn-secondary btn">First</span> <span class="btn-secondary btn">Second</span> <span class="btn-secondary btn">Third</span> </div>

Large ( lg )

First Second Third
<div aria-label="Basic example" class="btn-group-lg" role="group"> <span class="btn-secondary btn">First</span> <span class="btn-secondary btn">Second</span> <span class="btn-secondary btn">Third</span> </div>

Small ( sm )

First Second Third
<div aria-label="Basic example" class="btn-group-sm" role="group"> <span class="btn-secondary btn">First</span> <span class="btn-secondary btn">Second</span> <span class="btn-secondary btn">Third</span> </div>