DSO Component Library

# Button Group: S

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <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>

`
`

    <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: Small button group
    modifier: btn-group-sm

`

- Handle: @button-group--s
- Variants (4): M , Xs , S , L
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\10-misc\button-group\button-group.hbs

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>`