Button Group

The button group attaches related controls into one segmented row, like a split button, a set of toolbar actions, or an input with its button. For choices that toggle on and off, reach for tabs or a radio group instead.

<div class="btn-group">
  <div class="btn-group">
    <button class="btn btn-outline btn-icon" aria-label="Go back">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
    </button>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline">Archive</button>
    <button class="btn btn-outline">Report</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline">Snooze</button>
    <button
      id="bg-more-trigger"
      class="btn btn-outline btn-icon"
      aria-label="More options"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
    </button>
  </div>
</div>
 
<div
  class="dropdown min-w-40"
  data-sp-toggle="#bg-more-trigger"
  data-sp-placement="bottom-end"
>
  <a href="#" class="dropdown-item">Mark as read</a>
  <a href="#" class="dropdown-item">Archive</a>
</div>

Usage

Add the btn-group class to a container and put buttons directly inside it. The group removes the inner radii and collapses the shared borders.

Class	Description
`btn-group`	Add to the container wrapping the buttons
`btn-group-vertical`	Add to `btn-group` to stack the buttons vertically
`btn-group-separator`	Add to an element between buttons to divide them
`btn-group-text`	Add to a child for static text alongside the buttons

<div class="btn-group">
  <button class="btn btn-outline">Left</button>
  <button class="btn btn-outline">Center</button>
  <button class="btn btn-outline">Right</button>
</div>

Examples

Orientation

Add btn-group-vertical to stack the buttons vertically.

<div class="btn-group btn-group-vertical">
  <button class="btn btn-outline btn-icon" aria-label="Zoom in">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </button>
  <button class="btn btn-outline btn-icon" aria-label="Zoom out">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
  </button>
</div>

Size

Size the group through the buttons themselves.

<div class="btn-group">
  <button class="btn btn-outline btn-xs">Extra Small</button>
  <button class="btn btn-outline btn-xs">Button</button>
  <button class="btn btn-outline btn-xs">Group</button>
  <button class="btn btn-outline btn-xs btn-icon" aria-label="Add">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </button>
</div>
 
<div class="btn-group">
  <button class="btn btn-outline btn-sm">Small</button>
  <button class="btn btn-outline btn-sm">Button</button>
  <button class="btn btn-outline btn-sm">Group</button>
  <button class="btn btn-outline btn-sm btn-icon" aria-label="Add">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </button>
</div>
 
<div class="btn-group">
  <button class="btn btn-outline">Base</button>
  <button class="btn btn-outline">Button</button>
  <button class="btn btn-outline">Group</button>
  <button class="btn btn-outline btn-icon" aria-label="Add">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </button>
</div>
 
<div class="btn-group">
  <button class="btn btn-outline btn-lg">Large</button>
  <button class="btn btn-outline btn-lg">Button</button>
  <button class="btn btn-outline btn-lg">Group</button>
  <button class="btn btn-outline btn-lg btn-icon" aria-label="Add">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </button>
</div>

Nested

Nest groups inside a group and they separate with a small gap. Anything groupable nests the same way, like the input group holding the message field here.

<div class="btn-group">
  <div class="btn-group">
    <button class="btn btn-outline btn-icon" aria-label="Add attachment">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
    </button>
  </div>
  <div class="btn-group">
    <div class="input-group">
      <input class="input" placeholder="Send a message..." />
      <span id="bg-voice-addon" class="input-group-addon input-group-addon-end">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></svg>
      </span>
    </div>
  </div>
</div>
 
<div class="tooltip" data-sp-toggle="#bg-voice-addon">Voice Mode</div>

Split

Pair a main action with a compact secondary one. Outline buttons separate themselves with their borders; for other variants, divide the buttons with a btn-group-separator.

<div class="btn-group">
  <button class="btn btn-secondary">Button</button>
  <div class="btn-group-separator"></div>
  <button class="btn btn-secondary btn-icon" aria-label="Add">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </button>
</div>

Input

Group an input with its action.

<div class="btn-group">
  <input class="input" type="search" placeholder="Search..." />
  <button class="btn btn-outline" aria-label="Search">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
  </button>
</div>

Attach a dropdown trigger for secondary actions.

<div class="btn-group">
  <button class="btn btn-outline">Follow</button>
  <button
    id="bg-follow-trigger"
    class="btn btn-outline btn-icon"
    aria-label="More options"
  >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
</div>
 
<div
  class="dropdown min-w-44"
  data-sp-toggle="#bg-follow-trigger"
  data-sp-placement="bottom-end"
>
  <a href="#" class="dropdown-item">Mute conversation</a>
  <a href="#" class="dropdown-item">Mark as read</a>
</div>

Select

Group a select with an input.

<div class="btn-group">
  <div class="btn-group">
    <select class="select w-fit font-mono">
      <option>USD</option>
      <option>EUR</option>
      <option>GBP</option>
    </select>
    <input class="input" placeholder="10.00" />
  </div>
  <div class="btn-group">
    <button class="btn btn-outline btn-icon" aria-label="Send">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
    </button>
  </div>
</div>

Text

Attach static text to a control with btn-group-text, like a prefix or a unit.

<div class="btn-group">
  <div class="btn-group-text">https://</div>
  <input class="input" placeholder="example.com" />
</div>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. Flip directional icons with rtl:rotate-180. See the RTL guide for details.

<div id="button-group-rtl-demo" dir="rtl">
  <div class="btn-group">
    <div class="btn-group hidden sm:flex">
      <button class="btn btn-outline btn-icon" aria-label="Go back">
        <svg class="rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-outline" data-i18n="archive">أرشفة</button>
      <button class="btn btn-outline" data-i18n="report">تقرير</button>
    </div>
    <div class="btn-group">
      <button class="btn btn-outline" data-i18n="snooze">تأجيل</button>
      <button
        id="bg-rtl-more-trigger"
        class="btn btn-outline btn-icon"
        aria-label="More options"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
      </button>
    </div>
  </div>
 
</div>
<script>
  const translations = {
    ar: { dir: "rtl", archive: "أرشفة", report: "تقرير", snooze: "تأجيل" },
    he: { dir: "rtl", archive: "ארכיון", report: "דווח", snooze: "נודניק" },
    en: { dir: "ltr", archive: "Archive", report: "Report", snooze: "Snooze" },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("button-group-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>