Chi Design System

Button Groups

Decription

Button groups wrap a series of buttons.

Examples

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>

Hybrid buttons

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>