Accordion Alerts / Banner Buttons Card Collection Combo box Forms Language Layout List Navigation Other Search Social Summary box

Button Group (button_group)

A button group collects similar or related actions.

🔗 External documentation.

ID Label Description Schema
buttons Buttons An array of 'button' patterns. 
            id: button_group
label: 'Button Group'
description: 'A button group collects similar or related actions.'
group: Buttons
homepage: 'https://designsystem.digital.gov/components/button-group/'
variants:
    default:
        id: default
        label: Default
        description: 'The default button group arranges each button as a separate element with a gap between them. On mobile devices, the buttons are arranged vertically.'
    segmented:
        id: segmented
        label: Segmented
        description: 'Segmented button groups display a set of discrete buttons in a row as a single element.'
slots:
    buttons:
        id: buttons
        label: Buttons
        description: "An array of 'button' patterns."
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': button_group
            buttons:
                -
                    '@component': button
                    '@variant': default
                    label: First
                -
                    '@component': button
                    '@variant': default
                    label: Second
                -
                    '@component': button
                    '@variant': default
                    label: Third

Default ( default )

The default button group arranges each button as a separate element with a gap between them. On mobile devices, the buttons are arranged vertically.
<ul class="usa-button-group"> <li class="usa-button-group__item"> <button class="usa-button--default usa-button" type="button">First </button> </li><li class="usa-button-group__item"> <button class="usa-button--default usa-button" type="button">Second </button> </li><li class="usa-button-group__item"> <button class="usa-button--default usa-button" type="button">Third </button> </li> </ul>

Segmented ( segmented )

Segmented button groups display a set of discrete buttons in a row as a single element.
<ul class="usa-button-group--segmented usa-button-group"> <li class="usa-button-group__item"> <button class="usa-button--default usa-button" type="button">First </button> </li><li class="usa-button-group__item"> <button class="usa-button--default usa-button" type="button">Second </button> </li><li class="usa-button-group__item"> <button class="usa-button--default usa-button" type="button">Third </button> </li> </ul>