Skip to component content

Button Group

Join related controls into one compact action surface.

Usage

Use .btn-group when several closely related buttons should read as one compact control surface. Keep joined buttons in one action family, and include only actions that share the same context or operate on the same object.

Give every group an explicit accessible label with role="group" plus aria-label or aria-labelledby. When multiple groups share a row, wrap them in a .btn-toolbar with role="toolbar" and let each inner group keep its own label.

Use grouped checkbox or radio toggles only when the options act like buttons and the selected state needs to stay visible. Preserve normal focus order, keep icon-only buttons labelled, and move unrelated overflow actions into a dropdown rather than stretching the joined edge.

Outlined styles

Use the same btn-outline-* variant across a group when the controls should share one quiet visual weight.

Button Group 
<div class="btn-group" role="group" aria-label="Outlined actions">
  <button class="btn btn-outline-primary" type="button">Previous</button>
  <button class="btn btn-outline-primary" type="button">Current</button>
  <button class="btn btn-outline-primary" type="button">Next</button>
</div>

Icon-only group

Give every icon-only button a square size="icon" shape and an aria-label; the icon alone is not an accessible name.

Button Group 
<div class="btn-group" role="group" aria-label="Media controls">
  <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Previous item">
    <i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i>
  </button>
  <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Pin item">
    <i class="lucide lucide-pin" data-icon="inline-start" aria-hidden="true"></i>
  </button>
  <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Next item">
    <i class="lucide lucide-chevron-right" data-icon="inline-start" aria-hidden="true"></i>
  </button>
</div>

Size

btn-group-sm and btn-group-lg apply one density to every button in the group, keeping joined edges aligned.

Button Group 
<div class="d-flex flex-column align-items-center gap-3">
  <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
    <button class="btn btn-outline-secondary" type="button">Small</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Group</button>
    <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Add small action">
      <i class="lucide lucide-plus" data-icon="inline-start" aria-hidden="true"></i>
    </button>
  </div>
  <div class="btn-group" role="group" aria-label="Default button group">
    <button class="btn btn-outline-secondary" type="button">Default</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Group</button>
    <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Add default action">
      <i class="lucide lucide-plus" data-icon="inline-start" aria-hidden="true"></i>
    </button>
  </div>
  <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
    <button class="btn btn-outline-secondary" type="button">Large</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Group</button>
    <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Add large action">
      <i class="lucide lucide-plus" data-icon="inline-start" aria-hidden="true"></i>
    </button>
  </div>
</div>

Orientation

Use btn-group-vertical when related controls belong in a narrow rail or stacked tool palette.

Button Group 
<div class="btn-group-vertical" role="group" aria-label="Quantity controls">
  <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Increase value">
    <i class="lucide lucide-plus" data-icon="inline-start" aria-hidden="true"></i>
  </button>
  <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Decrease value">
    <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
  </button>
</div>

Toolbar

Use btn-toolbar for separate action clusters; gap-2 spaces the clusters while each inner group stays joined.

Button Group 
<div class="btn-toolbar gap-2" role="toolbar" aria-label="Editor toolbar">
  <div class="btn-group" role="group" aria-label="History actions">
    <button class="btn btn-outline-secondary" type="button">Undo</button>
    <button class="btn btn-outline-secondary" type="button">Redo</button>
  </div>
  <div class="btn-group" role="group" aria-label="Formatting actions">
    <button class="btn btn-outline-secondary" type="button">Bold</button>
    <button class="btn btn-outline-secondary" type="button">Italic</button>
    <button class="btn btn-outline-secondary" type="button">Link</button>
  </div>
  <div class="btn-group" role="group" aria-label="Publish action">
    <button class="btn btn-secondary" type="button">Publish</button>
  </div>
</div>

Mixed emphasis

Use mixed emphasis only when the actions form one joined decision surface; plain hover keeps the joined edge visually stable.

Button Group 
<div class="btn-group" role="group" aria-label="Review actions">
  <button class="btn btn-primary" type="button">Approve</button>
  <button class="btn btn-outline-secondary" type="button">Archive</button>
</div>

Nested groups

Use Bootstrap input grouping when buttons and fields need one connected surface.

Button Group 
<div class="d-flex align-items-center gap-2">
  <button class="btn btn-outline-secondary btn-icon rounded-3" type="button" aria-label="Add attachment">
    <i class="lucide lucide-plus" data-icon="inline-start" aria-hidden="true"></i>
  </button>
  <div class="field flex-grow-1">
    <div class="input-group rounded-3">
      <input class="form-control" type="text" placeholder="Send a message..." aria-label="Message body">
      <button class="btn btn-ghost btn-icon border-0" type="button" aria-label="Record voice note">
        <i class="lucide lucide-audio-lines" data-icon="inline-start" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</div>

Pair a primary action with a Dropdown Menu trigger for related variants. The chevron trigger carries an accessible name without Bootstrap's caret.

Button Group

Native select

Pair with the native Native Select component when the control should keep browser and mobile selection behavior.

Button Group 
<div class="d-inline-flex align-items-stretch">
  <div class="field flex-grow-1">
    <div class="input-group rounded-3">
      <select class="form-select btn-group-select" aria-label="Currency">
        <option value="usd">$ USD</option>
        <option value="eur">€ EUR</option>
        <option value="gbp" selected>£ GBP</option>
      </select>
      <input class="form-control" type="text" placeholder="10.00" aria-label="Amount">
      <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Send">
        <i class="lucide lucide-arrow-right" data-icon="inline-start" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</div>

RTL

Compare Arabic, Hebrew, and English command rails in an RTL shell for workspace admin workflows.

<div dir="rtl">
  <div class="btn-toolbar gap-2" role="toolbar" aria-label="إجراءات الرسالة">
    <div class="btn-group" role="group" aria-label="التنقل في الرسالة">
      <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="الرجوع">
        <i class="lucide lucide-arrow-left" data-icon="inline-start" aria-hidden="true"></i>
      </button>
    </div>
    <div class="btn-group" role="group" aria-label="مراجعة الرسالة">
      <button class="btn btn-outline-secondary" type="button">أرشفة</button>
      <button class="btn btn-outline-secondary" type="button">إبلاغ</button>
    </div>
    <div class="btn-group" role="group" aria-label="إجراءات أخرى">
      <button class="btn btn-outline-secondary" type="button">تأجيل</button>
      <button class="btn btn-outline-secondary btn-icon rounded-end" type="button" aria-label="المزيد" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li>
          <button class="dropdown-item" type="button">
            <i class="lucide lucide-mail-check" data-icon="inline-start" aria-hidden="true"></i>
            <span>وضع علامة كمُعالَج</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <i class="lucide lucide-archive" data-icon="inline-start" aria-hidden="true"></i>
            <span>نقل إلى الأرشيف</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <i class="lucide lucide-clock" data-icon="inline-start" aria-hidden="true"></i>
            <span>تأجيل التذكير</span>
          </button>
        </li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li>
          <button class="dropdown-item" type="button" data-variant="destructive">
            <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
            <span>حذف الرسالة</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>
<div dir="rtl">
  <div class="btn-toolbar gap-2" role="toolbar" aria-label="פעולות הודעה">
    <div class="btn-group" role="group" aria-label="ניווט בהודעה">
      <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="חזרה">
        <i class="lucide lucide-arrow-left" data-icon="inline-start" aria-hidden="true"></i>
      </button>
    </div>
    <div class="btn-group" role="group" aria-label="סקירת הודעה">
      <button class="btn btn-outline-secondary" type="button">ארכוב</button>
      <button class="btn btn-outline-secondary" type="button">דיווח</button>
    </div>
    <div class="btn-group" role="group" aria-label="פעולות נוספות">
      <button class="btn btn-outline-secondary" type="button">השהיה</button>
      <button class="btn btn-outline-secondary btn-icon rounded-end" type="button" aria-label="עוד" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li>
          <button class="dropdown-item" type="button">
            <i class="lucide lucide-mail-check" data-icon="inline-start" aria-hidden="true"></i>
            <span>סמן כטופל</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <i class="lucide lucide-archive" data-icon="inline-start" aria-hidden="true"></i>
            <span>העבר לארכיון</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <i class="lucide lucide-clock" data-icon="inline-start" aria-hidden="true"></i>
            <span>דחה תזכורת</span>
          </button>
        </li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li>
          <button class="dropdown-item" type="button" data-variant="destructive">
            <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
            <span>מחק הודעה</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>
<div dir="ltr">
  <div class="btn-toolbar gap-2" role="toolbar" aria-label="Message actions">
    <div class="btn-group" role="group" aria-label="Message navigation">
      <button class="btn btn-outline-secondary btn-icon" type="button" aria-label="Go back">
        <i class="lucide lucide-arrow-left" data-icon="inline-start" aria-hidden="true"></i>
      </button>
    </div>
    <div class="btn-group" role="group" aria-label="Message review">
      <button class="btn btn-outline-secondary" type="button">Archive</button>
      <button class="btn btn-outline-secondary" type="button">Report</button>
    </div>
    <div class="btn-group" role="group" aria-label="More actions">
      <button class="btn btn-outline-secondary" type="button">Snooze</button>
      <button class="btn btn-outline-secondary btn-icon rounded-end" type="button" aria-label="More" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li>
          <button class="dropdown-item" type="button">
            <i class="lucide lucide-mail-check" data-icon="inline-start" aria-hidden="true"></i>
            <span>Mark as handled</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <i class="lucide lucide-archive" data-icon="inline-start" aria-hidden="true"></i>
            <span>Move to archive</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button">
            <i class="lucide lucide-clock" data-icon="inline-start" aria-hidden="true"></i>
            <span>Delay reminder</span>
          </button>
        </li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li>
          <button class="dropdown-item" type="button" data-variant="destructive">
            <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
            <span>Delete message</span>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

Component reference

Status
Accepted
Runtime
native HTML/CSS
Markup
Bootstrap/native HTML
Reference

For more grouping patterns, see the Bootstrap Button group documentation.

Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.