Skip to content

Control Groups

To group related buttons and/or inputs together, you can use the g-control-group wrapping element. This will bunch the related elements together and remove the spacing between them.

Usage

<div class="g-control-group">
    <button class="g-button g-control-group__button">Button 1</button>
    <button class="g-button g-control-group__button">Button 2</button>
    <button class="g-button g-control-group__button">Button 3</button>
</div>

Variations

Add the following classes to the g-control-group

g-control-group--rounded

Round both sides of the control-group.

<div class="g-control-group g-control-group--rounded">
    <button class="g-button g-control-group__button">Button 1</button>
    <button class="g-button g-control-group__button">Button 2</button>
    <button class="g-button g-control-group__button">Button 3</button>
</div>

g-control-group--rounded-right

Round the right side of the control-group.

<div class="g-control-group g-control-group--rounded-right">
    <button class="g-button g-control-group__button">Button 1</button>
    <button class="g-button g-control-group__button">Button 2</button>
    <button class="g-button g-control-group__button">Button 3</button>
</div>

g-control-group--rounded-left

Round the left side of the control-group.

<div class="g-control-group g-control-group--rounded-left">
    <button class="g-button g-control-group__button">Button 1</button>
    <button class="g-button g-control-group__button">Button 2</button>
    <button class="g-button g-control-group__button">Button 3</button>
</div>

g-control-group--stacked

Display the buttons top-to-bottom instead of left-to-right

<div class="g-control-group g-control-group--stacked">
    <button class="g-button g-control-group__button">Button 1</button>
    <button class="g-button g-control-group__button">Button 2</button>
    <button class="g-button g-control-group__button">Button 3</button>
</div>