Button groups are used to wrap a series of buttons on a single line.
To render a button group, wrap a series of buttons in a div and apply 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>
To render a series of buttons vertically, apply 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 by applying the class -fluid
.
<div class="m-btnGroup -fluid">
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
</div>
<div class="m-btnGroup -vertical -fluid">
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
<button class="a-btn">Button</button>
</div>
Button text is centered by default. However, this behavior can change by applying the modifiers
-alignLeft
or -alignRight
.
<div class="m-btnGroup -fluid">
<button class="a-btn -alignLeft">Button</button>
<button class="a-btn">Button</button>
<button class="a-btn -alignRight">Button</button>
</div>
To disable the fluidity of a specific button in a fluid button group, apply the class -notFluid
to the button.
<div class="m-btnGroup -fluid">
<button class="a-btn">Button</button>
<button class="a-btn -notFluid">Button</button>
<button class="a-btn">Button</button>
</div>
Button groups support all button types and styles, including icons. Mix and match text and icons to form a hybrid button group.
<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>
Hybrid buttons also support fluid rendering.
<div class="m-btnGroup -fluid">
<button class="a-btn">Button</button>
<button class="a-btn -icon -notFluid">
<div class="a-btn__content">
<div class="a-icon">
<svg>
<use xlink:href="#workspace"></use>
</svg>
</div>
</div>
</button>
</div>