Button group

An inline-flex container that groups related buttons with consistent spacing. No BEM elements — children are plain ln-button instances. Default layout is horizontal with a small gap.

Default group

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

Attached group

The --attached modifier removes the gap and joins buttons into a segmented control with internal divider borders.

<div class="ln-button-group ln-button-group--attached">
  <button class="ln-button ln-button--outline">Day</button>
  <button class="ln-button ln-button--outline">Week</button>
  <button class="ln-button ln-button--outline">Month</button>
</div>

Vertical group

<div class="ln-button-group ln-button-group--vertical ln-button-group--attached">
  <button class="ln-button ln-button--outline">Top</button>
  <button class="ln-button ln-button--outline">Middle</button>
  <button class="ln-button ln-button--outline">Bottom</button>
</div>

Equal width buttons

The --fill modifier applies flex: auto to all children so they share the available space equally. Works with both horizontal and vertical groups.

<div class="ln-button-group ln-button-group--attached ln-button-group--fill">
  <button class="ln-button ln-button--outline">Yes</button>
  <button class="ln-button ln-button--outline">No</button>
  <button class="ln-button ln-button--outline">Maybe</button>
</div>

<div class="ln-button-group ln-button-group--vertical ln-button-group--attached ln-button-group--fill">
  <button class="ln-button ln-button--outline">Top</button>
  <button class="ln-button ln-button--outline">Middle</button>
  <button class="ln-button ln-button--outline">Bottom</button>
</div>

Reference

Class	Description	Responsive
`.ln-button-group`	Inline flex wrapper for buttons	No
`.ln-button-group--attached`	Join buttons with no gap	No
`.ln-button-group--vertical`	Stack buttons vertically	No
`.ln-button-group--fill`	Stretch buttons to fill width equally	No