Button groups wrap a series of buttons.
In order to group buttons just wrap them inside a div with the class m-btnGroup
.
<div class="m-btnGroup">
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
</div>
Also, if you want to make a vertical group add the class modifier -vertical
.
<div class="m-btnGroup -vertical">
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
</div>
Button groups can be expanded to fill the parent space with the use of -expanded
.
<div class="m-btnGroup -expanded">
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
</div>
Vertical groups can be expanded also!
<div class="m-btnGroup -vertical -expanded">
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
</div>
By default the button text is centered in expanded buttons, but you can change this behaviour using the modifiers
-alignLeft
or -alignRight
in the buttons.
<div class="m-btnGroup -expanded">
<button class="a-btn -alignLeft">Button</button>
<button class="a-btn">Button</button>
<button class="a-btn -alignRight">Button</button>
</div>
Also could happen that sometimes we don't want some specific button to be expanded inside an expanded group. You can
achieve this by the use of the modifier -notExpand
on that specific button.
<div class="m-btnGroup -expanded">
<button class="a-btn">Button</button>
<button class="a-btn -notExpand">Button</button>
<button class="a-btn">Button</button>
</div>
The combination of a text button with an icon buttons inside a button group allows us to create an hybrid button.
<div class="m-btnGroup">
<button class="a-btn">Button</button>
<button class="a-btn -icon">
<div class="a-btn__content">
<div class="a-icon">
<svg>
<use xlink:href="#workspace"></use>
</svg>
</div>
</div>
</button>
</div>
And remember that hybrid buttons can be expanded also.
<div class="m-btnGroup -expanded">
<button class="a-btn">Button</button>
<button class="a-btn -icon -notExpand">
<div class="a-btn__content">
<div class="a-icon">
<svg>
<use xlink:href="#workspace"></use>
</svg>
</div>
</div>
</button>
</div>