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 chi-button-group.

<div class="chi-button-group">
  <button class="chi-button">Button</button>
  <button class="chi-button">Button</button>
  <button class="chi-button">Button</button>
</div>

Vertical

To render a series of buttons vertically, apply the class modifier -vertical.

<div class="chi-button-group -vertical">
  <button class="chi-button">Button</button>
  <button class="chi-button">Button</button>
  <button class="chi-button">Button</button>
</div>

Fluid buttons

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

Horizontal

<div class="chi-button-group -fluid">
  <button class="chi-button">Button</button>
  <button class="chi-button">Button</button>
  <button class="chi-button">Button</button>
</div>

Vertical

<div class="chi-button-group -vertical -fluid">
  <button class="chi-button">Button</button>
  <button class="chi-button">Button</button>
  <button class="chi-button">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="chi-button-group -fluid">
  <button class="chi-button -align--left">Button</button>
  <button class="chi-button">Button</button>
  <button class="chi-button -align--right">Button</button>
</div>

Disable Fluidity

To disable the fluidity of a specific button in a fluid button group, apply the class -no-fluid to the button.

<div class="chi-button-group -fluid">
  <button class="chi-button">Button</button>
  <button class="chi-button -no-fluid">Button</button>
  <button class="chi-button">Button</button>
</div>

Sizes

Button groups support the following sizes: -sm, -md, -lg, -xl. The default size is -md.

Horizontal

-sm

-md

-lg

-xl

<!-- sm -->
<div class="chi-button-group">
  <button class="chi-button -sm">Button</button>
  <button class="chi-button -sm">Button</button>
  <button class="chi-button -sm">Button</button>
</div>
<!-- md -->
<div class="chi-button-group">
  <button class="chi-button -md">Button</button>
  <button class="chi-button -md">Button</button>
  <button class="chi-button -md">Button</button>
</div>
<!-- lg -->
<div class="chi-button-group">
  <button class="chi-button -lg">Button</button>
  <button class="chi-button -lg">Button</button>
  <button class="chi-button -lg">Button</button>
</div>
<!-- xl -->
<div class="chi-button-group">
  <button class="chi-button -xl">Button</button>
  <button class="chi-button -xl">Button</button>
  <button class="chi-button -xl">Button</button>
</div>

Vertical

-sm

-md

-lg

-xl

<!-- sm -->
<div class="chi-button-group -vertical -fluid">
  <button class="chi-button -sm">Button</button>
  <button class="chi-button -sm">Button</button>
  <button class="chi-button -sm">Button</button>
</div>
<!-- md -->
<div class="chi-button-group -vertical -fluid">
  <button class="chi-button -md">Button</button>
  <button class="chi-button -md">Button</button>
  <button class="chi-button -md">Button</button>
</div>
<!-- lg -->
<div class="chi-button-group -vertical -fluid">
  <button class="chi-button -lg">Button</button>
  <button class="chi-button -lg">Button</button>
  <button class="chi-button -lg">Button</button>
</div>
<!-- xl -->
<div class="chi-button-group -vertical -fluid">
  <button class="chi-button -xl">Button</button>
  <button class="chi-button -xl">Button</button>
  <button class="chi-button -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="chi-button-group">
  <button class="chi-button">Button</button>
  <button class="chi-button -icon" aria-label="Button action">
    <div class="chi-button__content">
      <i class="chi-icon icon-atom"></i>
    </div>
  </button>
</div>

Hybrid buttons also support fluid rendering.

<div class="chi-button-group -fluid">
  <button class="chi-button">Button</button>
  <button class="chi-button -icon -no-fluid" aria-label="Button action">
    <div class="chi-button__content">
      <i class="chi-icon icon-atom"></i>
    </div>
  </button>
</div>

Hybrid buttons sizes

Hybrid buttons support the following sizes: -sm, -md, -lg, -xl. The default size is -md.

<!-- sm -->
<div class="chi-button-group">
  <button class="chi-button -sm">Button</button>
  <button class="chi-button -sm -icon" aria-label="Button action">
    <div class="chi-button__content">
      <i class="chi-icon icon-atom"></i>
    </div>
  </button>
</div>
<!-- md -->
<div class="chi-button-group">
  <button class="chi-button -md">Button</button>
  <button class="chi-button -md -icon" aria-label="Button action">
    <div class="chi-button__content">
      <i class="chi-icon icon-atom"></i>
    </div>
  </button>
</div>
<!-- lg -->
<div class="chi-button-group">
  <button class="chi-button -lg">Button</button>
  <button class="chi-button -lg -icon" aria-label="Button action">
    <div class="chi-button__content">
      <i class="chi-icon icon-atom"></i>
    </div>
  </button>
</div>
<!-- xl -->
<div class="chi-button-group">
  <button class="chi-button -xl">Button</button>
  <button class="chi-button -xl -icon" aria-label="Button action">
    <div class="chi-button__content">
      <i class="chi-icon icon-atom"></i>
    </div>
  </button>
</div>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon