Button group

Group a series of buttons on one line, stack them in a column, or combine groups in a toolbar.

Bootstrap’s button group docs describe the markup and CSS.

Example

bsButtonGroup adds .btn-group and role="group". Give each group an aria-label.

HTML

<div bsButtonGroup aria-label="Basic example">
  <button type="button" bsButton theme="primary">Left</button>
  <button type="button" bsButton theme="primary">Middle</button>
  <button type="button" bsButton theme="primary">Right</button>
</div>

bsButtonToolbar combines groups with role="toolbar". The left and right arrow keys, Home and End move focus between its buttons.

HTML

<div bsButtonToolbar class="gap-2" aria-label="Toolbar with button groups">
  <div bsButtonGroup aria-label="First group">
    <button type="button" bsButton="outline" theme="secondary">1</button>
    <button type="button" bsButton="outline" theme="secondary">2</button>
    <button type="button" bsButton="outline" theme="secondary">3</button>
  </div>
  <div bsButtonGroup aria-label="Second group">
    <button type="button" bsButton="outline" theme="secondary">4</button>
    <button type="button" bsButton="outline" theme="secondary">5</button>
  </div>
</div>

Sizing and vertical

Set size on the group instead of on every button, and add vertical to stack the buttons.

HTML

<div class="hstack gap-3 align-items-start">
  <div bsButtonGroup size="lg" aria-label="Large group">
    <button type="button" bsButton="outline" theme="primary">Left</button>
    <button type="button" bsButton="outline" theme="primary">Right</button>
  </div>
  <div bsButtonGroup size="sm" aria-label="Small group">
    <button type="button" bsButton="outline" theme="primary">Left</button>
    <button type="button" bsButton="outline" theme="primary">Right</button>
  </div>
  <div bsButtonGroup vertical aria-label="Vertical group">
    <button type="button" bsButton theme="secondary">Top</button>
    <button type="button" bsButton theme="secondary">Middle</button>
    <button type="button" bsButton theme="secondary">Bottom</button>
  </div>
</div>

API

BsButtonGroup

Selector: [bsButtonGroup]

Inputs

Name	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Size of every button in the group.
`vertical`	`boolean`	`false`	Stacks the buttons.

BsButtonToolbar

Selector: [bsButtonToolbar]