Button Group

A row (or column) of related buttons that should be visually grouped — toolbars, segmented controls, filter pills. Composes existing Button sizes and states. Use Secondary, Tertiary, or Ghost as the base variant; let the selected button carry the emphasis (primary fill via aria-pressed, or solid border via .btn-group-active-border).

When to use

DigiLawyer Patterns

Button Group composes entirely with Button — all Button DigiLawyer Patterns carry over. The most relevant one for groups is shown below.

Anatomy

A Button Group wraps two or more Button atoms. The wrapper controls spacing and border-radius; individual buttons remain structurally unchanged.

Default

Wrap related buttons in a .btn-group. Adjacent buttons share borders so the row reads as a single component. Use this for segmented controls.

<div class="btn-group">
  <button class="btn btn-tertiary btn-md"><span class="btn-label">Day</span></button>
  <button class="btn btn-tertiary btn-md"><span class="btn-label">Week</span></button>
  <button class="btn btn-tertiary btn-md"><span class="btn-label">Month</span></button>
  <button class="btn btn-tertiary btn-md"><span class="btn-label">Year</span></button>
</div>

Attached vs separated

.btn-group is attached by default (shared borders). Add .btn-group-separated for a gap-spaced group where each button keeps its own radius — use this when buttons are unrelated peers (action bars, multi-action toolbars).

<!-- Attached -->
<div class="btn-group">...</div>

<!-- Separated -->
<div class="btn-group btn-group-separated">...</div>

Sizes

Use a single size class on every button in the group. Mixing sizes inside a group is not supported.

With icons

Icon-only and icon+label work inside groups. Icon-only buttons are common for toolbars (alignment, formatting). The standard <span class="icon"> wrapper auto-sizes per button size.

Toggle / selection

For segmented controls where exactly one button is selected at a time, set aria-pressed="true" on the selected button (or class="active" if you don't need the semantics). Click any button below — only one stays selected.

<div class="btn-group" role="group" aria-label="View">
  <button class="btn btn-tertiary btn-md" aria-pressed="false">...</button>
  <button class="btn btn-tertiary btn-md" aria-pressed="true">...</button>
  <button class="btn btn-tertiary btn-md" aria-pressed="false">...</button>
</div>

// Every .btn-group on the page toggles by default — add data-no-toggle to opt out.
document.querySelectorAll('.btn-group:not([data-no-toggle]) .btn').forEach(b => {
  b.addEventListener('click', () => {
    b.closest('.btn-group')
      .querySelectorAll('.btn')
      .forEach(x => x.setAttribute('aria-pressed', x === b ? 'true' : 'false'));
  });
});

Vertical

Add .btn-group-vertical for a stacked column — useful in narrow sidebars or mobile layouts. Combines with .btn-group-separated.

States

Each button keeps its own disabled state. Disable an entire group by disabling all of its buttons, or a single button to indicate one option is unavailable.

Full matrix

A button-group's structure is defined by position: which corners are rounded and which borders collapse into the neighbouring button. The five position variants below are the building blocks — horizontal groups use Left / Middle / Right, vertical groups use Up / Middle / Down. Inside a real .btn-group these are applied automatically via :first-child / :last-child. The standalone .btn-pos-* helpers below let you visualise or hand-compose the same shapes.

Accessibility

Follows the WAI-ARIA Toolbar pattern for action groups, or the Radio Group pattern for selection groups.

API