Chi · Button Group

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>

Pill

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>

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>

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">
    <div class="a-btn__content">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></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="#icon-atom"></use>
        </svg>
      </div>
    </div>
  </button>
</div>