Button Group

Arrange buttons with visual connection. For full button specs, see Elevate Lookbook and DESIGN.md.

Horizontal (Default)

Most common pattern: Primary + Tertiary pairing with 4px gap.

<div class="button-group button-group--horizontal">
  <button class="btn btn--primary btn--md">Save</button>
  <button class="btn btn--tertiary btn--md">Cancel</button>
</div>

Three Buttons

Primary + Secondary + Tertiary for multi-option flows.

<div class="button-group button-group--horizontal">
  <button class="btn btn--primary btn--md">Save</button>
  <button class="btn btn--secondary btn--md">Save as draft</button>
  <button class="btn btn--tertiary btn--md">Cancel</button>
</div>

Connected Style

Buttons share borders, useful for segmented controls or choice groups.

<div class="button-group button-group--horizontal button-group--connected">
  <button class="btn btn--secondary btn--md">Yes</button>
  <button class="btn btn--secondary btn--md">No</button>
  <button class="btn btn--secondary btn--md">Maybe</button>
</div>

Vertical Stack

Less common, useful for narrow layouts or mobile.

<div class="button-group button-group--vertical">
  <button class="btn btn--primary btn--md">Primary action</button>
  <button class="btn btn--secondary btn--md">Secondary action</button>
  <button class="btn btn--tertiary btn--md">Cancel</button>
</div>

Vertical Connected

Stacked with shared borders.

<div class="button-group button-group--vertical button-group--connected">
  <button class="btn btn--secondary btn--md">Option 1</button>
  <button class="btn btn--secondary btn--md">Option 2</button>
  <button class="btn btn--secondary btn--md">Option 3</button>
</div>

Tight Spacing

8px gap instead of 12px, for compact layouts.

<div class="button-group button-group--horizontal button-group--tight">
  <button class="btn btn--secondary btn--sm">Edit</button>
  <button class="btn btn--secondary btn--sm">Delete</button>
  <button class="btn btn--secondary btn--sm">Share</button>
</div>

Usage Notes