Button group

The button group component can contain regular buttons. Note that fade-buttons and overlay-buttons are not supported.

  • Default
  • Inverse
<div class="lui-buttongroup">
  <button class="lui-button  lui-buttongroup__button">
    First button
  </button>
  <button class="lui-button  lui-buttongroup__button">
    Second button
  </button>
  <button class="lui-button  lui-buttongroup__button  lui-active">
    Third button
  </button>
</div>
<div class="lui-buttongroup">
  <button class="lui-button  lui-buttongroup__button  lui-button--inverse">
    First button
  </button>
  <button class="lui-button  lui-buttongroup__button  lui-button--inverse">
    Second button
  </button>
  <button class="lui-button  lui-buttongroup__button  lui-button--inverse  lui-active">
    Third button
  </button>
</div>

Button groups can be used with different variants of buttons, including color and sizing variants.

  • Default
  • Inverse
<div class="lui-buttongroup">
  <button class="lui-button  lui-buttongroup__button  lui-button--rounded">
    <span class="lui-button__text">First button</span><span class="lui-button__icon  lui-icon  lui-icon--info"></span>
  </button>
  <button class="lui-button  lui-buttongroup__button  lui-button--rounded">
    Second button
  </button>
  <button class="lui-button  lui-buttongroup__button  lui-button--rounded  lui-button--info">
    Third button
  </button>
</div>
<div class="lui-buttongroup">
  <button class="lui-button  lui-buttongroup__button  lui-button--rounded  lui-button--inverse">
    <span class="lui-button__text">First button</span><span class="lui-button__icon  lui-icon  lui-icon--info"></span>
  </button>
  <button class="lui-button  lui-buttongroup__button  lui-button--rounded  lui-button--inverse">
    Second button
  </button>
  <button class="lui-button  lui-buttongroup__button  lui-button--rounded  lui-button--info">
    Third button
  </button>
</div>