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>
Use the -pill
modifier class to render a series of buttons with a more pronounced border-radius.
<div class="m-btnGroup -pill">
<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
-align--left
or -align--right
.
<div class="m-btnGroup -fluid">
<button class="a-btn -align--left">Button</button>
<button class="a-btn">Button</button>
<button class="a-btn -align--right">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 supports a full spectrum of sizes: -sm
, -md
,
-lg
, -xl
.
The default size is -md
.
-sm
-md
-lg
-xl
<!-- sm -->
<div class="m-btnGroup">
<button class="a-btn -sm">Button</button>
<button class="a-btn -sm">Button</button>
<button class="a-btn -sm">Button</button>
</div>
<!-- md -->
<div class="m-btnGroup">
<button class="a-btn -md">Button</button>
<button class="a-btn -md">Button</button>
<button class="a-btn -md">Button</button>
</div>
<!-- lg -->
<div class="m-btnGroup">
<button class="a-btn -lg">Button</button>
<button class="a-btn -lg">Button</button>
<button class="a-btn -lg">Button</button>
</div>
<!-- xl -->
<div class="m-btnGroup">
<button class="a-btn -xl">Button</button>
<button class="a-btn -xl">Button</button>
<button class="a-btn -xl">Button</button>
</div>
-sm
-md
-lg
-xl
<!-- sm -->
<div class="m-btnGroup -vertical -fluid">
<button class="a-btn -sm">Button</button>
<button class="a-btn -sm">Button</button>
<button class="a-btn -sm">Button</button>
</div>
<!-- md -->
<div class="m-btnGroup -vertical -fluid">
<button class="a-btn -md">Button</button>
<button class="a-btn -md">Button</button>
<button class="a-btn -md">Button</button>
</div>
<!-- lg -->
<div class="m-btnGroup -vertical -fluid">
<button class="a-btn -lg">Button</button>
<button class="a-btn -lg">Button</button>
<button class="a-btn -lg">Button</button>
</div>
<!-- xl -->
<div class="m-btnGroup -vertical -fluid">
<button class="a-btn -xl">Button</button>
<button class="a-btn -xl">Button</button>
<button class="a-btn -xl">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" aria-label="Button action">
<div class="a-btn__content">
<i class="a-icon icon-atom"></i>
</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" aria-label="Button action">
<div class="a-btn__content">
<i class="a-icon icon-atom"></i>
</div>
</button>
</div>
Hybrid buttons supports a full spectrum of sizes: -sm
, -md
,
-lg
, -xl
.
The default size is -md
.
<!-- sm -->
<div class="m-btnGroup">
<button class="a-btn -sm">Button</button>
<button class="a-btn -sm -icon" aria-label="Button action">
<div class="a-btn__content">
<i class="a-icon icon-atom"></i>
</div>
</button>
</div>
<!-- md -->
<div class="m-btnGroup">
<button class="a-btn -md">Button</button>
<button class="a-btn -md -icon" aria-label="Button action">
<div class="a-btn__content">
<i class="a-icon icon-atom"></i>
</div>
</button>
</div>
<!-- lg -->
<div class="m-btnGroup">
<button class="a-btn -lg">Button</button>
<button class="a-btn -lg -icon" aria-label="Button action">
<div class="a-btn__content">
<i class="a-icon icon-atom"></i>
</div>
</button>
</div>
<!-- xl -->
<div class="m-btnGroup">
<button class="a-btn -xl">Button</button>
<button class="a-btn -xl -icon" aria-label="Button action">
<div class="a-btn__content">
<i class="a-icon icon-atom"></i>
</div>
</button>
</div>