Button Toolbar (`button_toolbar`)

Definition
API definition

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

🔗 External documentation.

ID	Label	Description	Schema
groups	Groups	An array of 'button_group' patterns. Or other 'groupable' elements.
label	Role	The toolbar label. Visually hidden. Used with assistive technologies.	`type: string`

            id: button_toolbar
label: 'Button Toolbar'
description: 'Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.'
group: Button
homepage: 'https://getbootstrap.com/docs/5.3/components/button-group/#button-toolbar'
slots:
    groups:
        id: groups
        label: Groups
        description: "An array of 'button_group' patterns. Or other 'groupable' elements."
props:
    label:
        id: label
        label: Role
        description: 'The toolbar label. Visually hidden. Used with assistive technologies.'
        schema:
            type: string
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': button_toolbar
            groups:
                -
                    '@component': button_group
                    '@variant': default
                    '@styles':
                        - me-2
                    buttons:
                        -
                            '@component': button
                            '@variant': secondary
                            label: First
                        -
                            '@component': button
                            '@variant': secondary
                            label: Second
                        -
                            '@component': button
                            '@variant': secondary
                            label: Third
                    label: 'Basic example'
                -
                    '@component': button_group
                    '@variant': default
                    '@styles':
                        - me-2
                    buttons:
                        -
                            '@component': button
                            '@variant': secondary
                            label: First
                        -
                            '@component': button
                            '@variant': secondary
                            label: Second
                        -
                            '@component': button
                            '@variant': secondary
                            label: Third
                    label: 'Basic example'
                -
                    '@component': button_group
                    '@variant': default
                    buttons:
                        -
                            '@component': button
                            '@variant': secondary
                            label: First
                        -
                            '@component': button
                            '@variant': secondary
                            label: Second
                        -
                            '@component': button
                            '@variant': secondary
                            label: Third
                    label: 'Basic example'
            label: 'Toolbar with button groups'

Preview
Source

<div aria-label="Toolbar with button groups" class="btn-toolbar" role="toolbar"> <div aria-label="Basic example" class="me-2 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> <div aria-label="Basic example" class="me-2 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> <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> </div>

Button Toolbar (button_toolbar)

Button Toolbar (`button_toolbar`)