Accordion Button Card Carousel Dialog Dropdown Layout List group Navbar Navigation Navs and tabs Others Toast Typography

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
buttons Buttons An array of 'button' patterns.
label Role The group label. Visually hidden. Used with assistive technologies. 
                        type: string

                      
            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.'
group: Button
homepage: 'https://getbootstrap.com/docs/5.3/components/button-group/'
variants:
    sm:
        id: sm
        label: Small
    default:
        id: default
        label: Default
    lg:
        id: lg
        label: Large
    vertical:
        id: vertical
        label: Vertical
        description: 'Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.'
slots:
    buttons:
        id: buttons
        label: Buttons
        description: "An array of 'button' patterns."
props:
    label:
        id: label
        label: Role
        description: 'The group label. Visually hidden. Used with assistive technologies.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': button_group
            buttons:
                -
                    '@component': button
                    '@variant': secondary
                    label: First
                -
                    '@component': button
                    '@variant': secondary
                    label: Second
                -
                    '@component': button
                    '@variant': secondary
                    label: Third
            label: 'Basic example'

Small ( sm )

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

Default ( default )

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

Large ( lg )

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

Vertical ( vertical )

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
<div aria-label="Basic example" class="btn-group-vertical" role="group"> <button class="btn-secondary btn" type="button">First </button> <button class="btn-secondary btn" type="button">Second </button> <button class="btn-secondary btn" type="button">Third </button> </div>