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>