Skip to content
Airframe

Button Group

Join related buttons into one control. Inner end-borders collapse so the group reads as a single shape (whatever --af-btn-radius is, which follows --af-radius).

<div class="af-btn-group">
  <button type="button" class="af-btn">Left</button>
  <button type="button" class="af-btn">Middle</button>
  <button type="button" class="af-btn">Right</button>
</div>

Filled groups keep the reserved 1px border transparent and draw a faint inset join from currentColor. Put role="group" (or role="tablist") on the container when the buttons are a set.

Variants

Section titled “Variants”

Same af-is-* modifiers as Button. Keep one variant on every button so the outer ring joins.

<div class="af-btn-group">
  <button type="button" class="af-btn af-is-secondary">Left</button>
  <button type="button" class="af-btn af-is-secondary">Middle</button>
  <button type="button" class="af-btn af-is-secondary">Right</button>
</div>

Outline

Section titled “Outline”

Outline groups join on the visible 1px ring. Combine with an intent the same way a single outline button does.

<div class="af-btn-group">
  <button type="button" class="af-btn af-is-outline">Left</button>
  <button type="button" class="af-btn af-is-outline">Middle</button>
  <button type="button" class="af-btn af-is-outline">Right</button>
</div>

<div class="af-btn-group">
  <button type="button" class="af-btn af-is-outline af-is-secondary">Left</button>
  <button type="button" class="af-btn af-is-outline af-is-secondary">Middle</button>
  <button type="button" class="af-btn af-is-outline af-is-secondary">Right</button>
</div>

Selected

Section titled “Selected”

For a segmented control, keep the same intent on every button. Drop af-is-outline on the selected one so it fills. Mark it with aria-pressed or aria-selected.

<div class="af-btn-group" role="group" aria-label="View">
  <button type="button" class="af-btn af-is-sm af-is-outline af-is-secondary">Day</button>
  <button type="button" class="af-btn af-is-sm af-is-secondary" aria-pressed="true">Week</button>
  <button type="button" class="af-btn af-is-sm af-is-outline af-is-secondary">Month</button>
</div>

Do not mix unrelated intents (primary next to danger). The join is one ring.

Sizes

Section titled “Sizes”

Size modifiers apply per button. Use the same size on every child.

<div class="af-btn-group">
  <button type="button" class="af-btn af-is-sm">Left</button>
  <button type="button" class="af-btn af-is-sm">Middle</button>
  <button type="button" class="af-btn af-is-sm">Right</button>
</div>

Vertical

Section titled “Vertical”

Stack the group with af-is-vertical. The modifier is on the group, not on af-btn.

<div class="af-btn-group af-is-vertical">
  <button type="button" class="af-btn">Top</button>
  <button type="button" class="af-btn">Middle</button>
  <button type="button" class="af-btn">Bottom</button>
</div>
Section titled “Related”