Button group

Group related buttons on a single line, in toolbars, nested dropdown groups, or vertical stacks.

Basic example

Wrap a series of buttons in <bs-button-group> to present related actions as one grouped control. Provide an accessible label when the group has related controls.

The group can also contain anchor-rendered buttons when grouped links are more appropriate than navigation components.


Active link Link Link
aspnet 

<bs-button-group aria-label="Basic example">
    <bs-button btn-style="Primary">Left</bs-button>
    <bs-button btn-style="Primary">Middle</bs-button>
    <bs-button btn-style="Primary">Right</bs-button>
</bs-button-group>
<br />
<bs-button-group top-margin="Default3" aria-label="Basic link group">
    <bs-button href="#" btn-style="Primary" is-active="true" aria-current="Page">Active link</bs-button>
    <bs-button href="#" btn-style="Primary">Link</bs-button>
    <bs-button href="#" btn-style="Primary">Link</bs-button>
</bs-button-group>

Mixed styles

Use each contained <bs-button> to choose a different btn-style when the grouped actions need distinct visual emphasis.

aspnet 

<bs-button-group aria-label="Basic mixed styles example">
    <bs-button btn-style="Danger">Left</bs-button>
    <bs-button btn-style="Warning">Middle</bs-button>
    <bs-button btn-style="Success">Right</bs-button>
</bs-button-group>

Outlined styles

Set outline="true" on the contained buttons when the group should use outline variants.

aspnet 

<bs-button-group aria-label="Basic outlined example">
    <bs-button btn-style="Primary" outline="true">Left</bs-button>
    <bs-button btn-style="Primary" outline="true">Middle</bs-button>
    <bs-button btn-style="Primary" outline="true">Right</bs-button>
</bs-button-group>

Checkbox and radio button groups

Combine <bs-button-toggle> helpers inside a button group to create button-like checkbox and radio controls.


aspnet 

<bs-button-group aria-label="Basic checkbox toggle button group">
    <bs-button-toggle id="btncheck1" checked="true" btn-style="Primary">Checkbox 1</bs-button-toggle>
    <bs-button-toggle id="btncheck2" btn-style="Primary">Checkbox 2</bs-button-toggle>
    <bs-button-toggle id="btncheck3" btn-style="Primary">Checkbox 3</bs-button-toggle>
</bs-button-group>
<br />
<bs-button-group aria-label="Basic radio toggle button group">
    <bs-button-toggle id="btnradio1" mode="Radio" name="btnradio" checked="true" btn-style="Primary">Radio 1</bs-button-toggle>
    <bs-button-toggle id="btnradio2" mode="Radio" name="btnradio" btn-style="Primary">Radio 2</bs-button-toggle>
    <bs-button-toggle id="btnradio3" mode="Radio" name="btnradio" btn-style="Primary">Radio 3</bs-button-toggle>
</bs-button-group>

Button toolbar

Combine button groups into a toolbar with spacing utilities and role="toolbar".

aspnet 

<bs-div display="Flex" flex-wrap="Wrap" gap="Default2" role="toolbar" aria-label="Toolbar with button groups">
    <bs-button-group aria-label="First group">
        <bs-button btn-style="Primary">1</bs-button>
        <bs-button btn-style="Primary">2</bs-button>
        <bs-button btn-style="Primary">3</bs-button>
        <bs-button btn-style="Primary">4</bs-button>
    </bs-button-group>
    <bs-button-group aria-label="Second group">
        <bs-button btn-style="Secondary">5</bs-button>
        <bs-button btn-style="Secondary">6</bs-button>
        <bs-button btn-style="Secondary">7</bs-button>
    </bs-button-group>
    <bs-button-group aria-label="Third group">
        <bs-button btn-style="Info">8</bs-button>
    </bs-button-group>
</bs-div>

Sizing

Use btn-group-size on the group to size all contained buttons together, including nested groups when they participate in the same visual grouping.



aspnet 

<bs-button-group btn-group-size="Large" aria-label="Large button group" bottom-margin="Default3">
    <bs-button btn-style="Primary">Left</bs-button>
    <bs-button btn-style="Primary">Middle</bs-button>
    <bs-button btn-style="Primary">Right</bs-button>
</bs-button-group>
<br />
<bs-button-group aria-label="Default button group" bottom-margin="Default3">
    <bs-button btn-style="Primary">Left</bs-button>
    <bs-button btn-style="Primary">Middle</bs-button>
    <bs-button btn-style="Primary">Right</bs-button>
</bs-button-group>
<br />
<bs-button-group btn-group-size="Small" aria-label="Small button group">
    <bs-button btn-style="Primary">Left</bs-button>
    <bs-button btn-style="Primary">Middle</bs-button>
    <bs-button btn-style="Primary">Right</bs-button>
</bs-button-group>

Nesting

Place a dropdown inside a button group when direct actions and additional choices should share one grouped control.

aspnet 

<bs-button-group aria-label="Button group with nested dropdown">
    <bs-button btn-style="Primary">1</bs-button>
    <bs-button btn-style="Primary">2</bs-button>
    <bs-dropdown btn-style="Primary">
        Dropdown
        <bs-dropdown-menu>
            <bs-dropdown-menu-item href="#">Dropdown link</bs-dropdown-menu-item>
            <bs-dropdown-menu-item href="#">Dropdown link</bs-dropdown-menu-item>
        </bs-dropdown-menu>
    </bs-dropdown>
</bs-button-group>

Vertical variation

Set btn-group-vertical="true" to stack grouped buttons vertically instead of horizontally. Keep split button dropdowns out of vertical groups.

aspnet 

<bs-button-group btn-group-vertical="true" aria-label="Vertical button group">
    <bs-button btn-style="Primary">Button</bs-button>
    <bs-button btn-style="Primary">Button</bs-button>
    <bs-button btn-style="Primary">Button</bs-button>
    <bs-button btn-style="Primary">Button</bs-button>
</bs-button-group>