Button groups

Buttons joined into one control

Choose one

A segmented choice: radio buttons with arrow keys.

Show the code

<div class="segmented" role="radiogroup" aria-label="Period" data-radios>
<button type="button" role="radio" aria-checked="true">Today</button>
<button type="button" role="radio" aria-checked="false">7 days</button>
<button type="button" role="radio" aria-checked="false">30 days</button>
</div>

A group

Related actions side by side.

Show the code

<div class="btn-group" role="group" aria-label="View">
<button type="button" class="btn">
<i class="ti ti-list">
</i>List</button>
<button type="button" class="btn">
<i class="ti ti-layout-grid">
</i>Grid</button>
<button type="button" class="btn">
<i class="ti ti-map">
</i>Map</button>
</div>

Toggles

Each one on or off (aria-pressed).

Show the code

<div class="btn-group" role="group" aria-label="Text style">
<button type="button" class="btn btn-icon" aria-pressed="true" data-toggle aria-label="Bold" data-tip="Bold">
<i class="ti ti-bold">
</i>
</button>
<button type="button" class="btn btn-icon" aria-pressed="false" data-toggle aria-label="Italic" data-tip="Italic">
<i class="ti ti-italic">
</i>
</button>
<button type="button" class="btn btn-icon" aria-pressed="false" data-toggle aria-label="Underline" data-tip="Underline">
<i class="ti ti-underline">
</i>
</button>
</div>

A toolbar

Groups with space between them.

Show the code

<div class="btn-toolbar" role="toolbar" aria-label="Table actions">
<div class="btn-group" role="group" aria-label="Export">
<button type="button" class="btn">
<i class="ti ti-file-type-csv">
</i>CSV</button>
<button type="button" class="btn">
<i class="ti ti-file-type-pdf">
</i>PDF</button>
</div>
<button type="button" class="btn">
<i class="ti ti-printer">
</i>Print</button>
</div>