DSO Component Library

Button Group 

<!-- M -->
<div class="btn-group " role="group" aria-label="Medium button group">
    <button type="button" class="btn btn-primary">Links</button>
    <button type="button" class="btn btn-primary">Midden</button>
    <button type="button" class="btn btn-primary">Rechts</button>
</div>


<!-- Xs -->
<div class="btn-group btn-group-xs" role="group" aria-label="Extra small button group">
    <button type="button" class="btn btn-primary">Links</button>
    <button type="button" class="btn btn-primary">Midden</button>
    <button type="button" class="btn btn-primary">Rechts</button>
</div>


<!-- S -->
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
    <button type="button" class="btn btn-primary">Links</button>
    <button type="button" class="btn btn-primary">Midden</button>
    <button type="button" class="btn btn-primary">Rechts</button>
</div>


<!-- L -->
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
    <button type="button" class="btn btn-primary">Links</button>
    <button type="button" class="btn btn-primary">Midden</button>
    <button type="button" class="btn btn-primary">Rechts</button>
</div>


<div class="btn-group {{ modifier }}" role="group" aria-label="{{ ariaLabel }}">
  {{#each buttons }}
    <button type="button" class="btn btn-primary">{{ this }}</button>
  {{/each}}
</div>
 
/* M */
buttons:
  - Links
  - Midden
  - Rechts
ariaLabel: Medium button group



/* Xs */
buttons:
  - Links
  - Midden
  - Rechts
ariaLabel: Extra small button group
modifier: btn-group-xs



/* S */
buttons:
  - Links
  - Midden
  - Rechts
ariaLabel: Small button group
modifier: btn-group-sm



/* L */
buttons:
  - Links
  - Midden
  - Rechts
ariaLabel: Large button group
modifier: btn-group-lg

Groepeert een set buttons op een enkele regel. Gebaseerd op de Bootstrap “Button groups” component