Mark · Components

Button group

Two or more buttons that belong together. The base sets them side by side with a gap — the arrangement pages actually need. join collapses the gap so they read as one piece — the look a segmented control is drawn with, asked for rather than defaulted.

See it beside Bootstrap's

Grouped

Full page preview ↗
Get started View examples 
<div class="mk-btn-group" role="group" aria-label="Actions">
  <a class="mk-btn mk-btn--primary" href="#">Get started</a>
  <a class="mk-btn" href="#">View examples</a>
</div>
label: Actions
buttons: [2 items]

Joined

Full page preview ↗
Grid List Map 
<div class="mk-btn-group mk-btn-group--join" role="group" aria-label="View as">
  <a class="mk-btn" href="#">Grid</a>
  <a class="mk-btn" href="#">List</a>
  <a class="mk-btn" href="#">Map</a>
</div>
label: View as
join: true
buttons: [3 items]

Stacked

Full page preview ↗
Monthly Annual 
<div class="mk-btn-group mk-btn-group--stack" role="group" aria-label="Plans">
  <a class="mk-btn" href="#">Monthly</a>
  <a class="mk-btn mk-btn--primary" href="#">Annual</a>
</div>
label: Plans
stack: true
buttons: [2 items]
Fields (6)
FieldTypeNotes
buttons repeater
join boolean Collapse the gap — borders merge and the interior corners square off. Geometry only; what pressing a member MEANS is the partial's business
stack boolean Run vertically instead of across
size text sm, lg, or empty — applied to every button
label text Names the group for screen readers
class_names text
On this page