DSO Component Library

Button Group: 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>
 
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>