Esc

Button groups

Button groups are commonly used for pagination elements and voting buttons on Article pages.

In this article

Usage

Use .button-group on an element that contains two or more .button elements to create a button group.

<div class="button-group mb-4" role="group">
  <button class="button button-outline">
    <svg class="svg-icon fill-current" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg">...</svg>
  </button>
  <button class="button button-outline">
    <svg class="svg-icon fill-current" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg">...</svg>
  </button>
</div>

<div class="mb-4" role="toolbar" aria-label="Toolbar with button groups">
  <div class="button-group mr-2" role="group" aria-label="First group">
    <button class="button button-outline">1</button>
    <button class="button button-outline">2</button>
    <button class="button button-outline">3</button>
    <button class="button button-outline">4</button>
  </div>
  <div class="button-group mr-2" role="group" aria-label="Second group">
    <button class="button button-outline">5</button>
    <button class="button button-outline">6</button>
    <button class="button button-outline">7</button>
  </div>
  <div class="button-group" role="group" aria-label="Third group">
    <button class="button button-outline">8</button>
  </div>
</div>

<div class="button-group mb-4" role="group" aria-label="Basic example">
  <button class="button button-outline">Left</button>
  <button class="button button-outline">Middle</button>
  <button class="button button-outline">Right</button>
</div>

Sizes

Use .button-group-{size} with an existing .button-group to resize each .button in the group automatically.

<div class="button-group button-group-lg" role="group" aria-label="...">...</div>
<div class="button-group" role="group" aria-label="...">...</div>
<div class="button-group button-group-sm" role="group" aria-label="...">...</div>

Variants

Use .button-group-vertical to stack .button elements vertically rather than horizontally.

<div class="button-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="button button-outline">Button</button>
  <button type="button" class="button button-outline">Button</button>
  <button type="button" class="button button-outline">Button</button>
  <button type="button" class="button button-outline">Button</button>
  <button type="button" class="button button-outline">Button</button>
  <button type="button" class="button button-outline">Button</button>
</div>

Questions or feedback about this article? Let us know