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

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<button type="button" class="btn btn-primary">Links</button>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Button Group

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<button type="button" class="btn btn-primary">Links</button>