Button Group

The component optically merges a list of Buttons into one row.

The following code examples shows how to use button group:

<div class="button-group">
  <button class="button">hello World</button>
  <button class="button">hello World</button>
  <!-- ... -->
</div>

The following list describe all existing block/element/modifier classes of the component and all data attributes.

• .button-group - required the block that contains a list of buttons
• Modifier
  • .button-group--stretch use width 100%
  • .button-group--stretch-{SCREEN_SIZE} until the screen size

The variables are:

• SCREEN_SIZE lg, md, sm, xs

Basic Example:

Button as sub element

You can also use other components, but these must contain a button as the first child element, e.g.:

<div class="button-group">
  <button class="button">hello World</button>
  <div class="SOME-COMPONENT">
    <button class="button">a first child button</button>
  </div>
  <!-- ... -->
</div>

The CSS selector for this sub element buttons is .button-group > * > .button {...}.

Modifier

Stretch

The following examples show the stretched button group.