Design Kit

Button Group

Button groups are used to wrap a series of buttons on a single line.

Examples

Base

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>

Vertical

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>

Fluid buttons

Button groups can be expanded to fill the parent space by applying the class -fluid.

Horizontal

<div class="m-btnGroup -fluid">
  <button class="a-btn">Button</button>
  <button class="a-btn">Button</button>
  <button class="a-btn">Button</button>
</div>

Vertical

<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>

Alignment

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>

Disable Fluidity

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>

Sizes

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>

Hybrid buttons

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 sizes

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>