Chi Documentation

Button

Buttons are used to trigger actions in forms, modals, and more.

Button tags

To render a button, apply the class a-btn to a <button> element. Although buttons were designed for the <button> element, Chi also supports button classes on <a> and <input> elements.

Link
<!-- default -->
<button class="a-btn">Button</button>
<!-- also supported -->
<a class="a-btn" role="button">Link</a>
<input class="a-btn" type="button" value="Input">
<input class="a-btn" type="submit" value="Submit">
<input class="a-btn" type="reset" value="Reset">

Examples

Base

Chi includes a wide variety of predefined button styles. For most cases, the base and -brand buttons will be sufficient. For special cases, such as styling a destructive action button, a -danger button may be used.

<!-- default buttons -->
<button class="a-btn">Base</button>
<button class="a-btn -brand">Brand</button>
<!-- special case buttons -->
<button class="a-btn -danger">Danger</button>
<button class="a-btn -info">Info</button>
<button class="a-btn -dark">Dark</button>

Outline

To remove a buttons solid background and keep its colored border, apply the class -outline.

<button class="a-btn -outline">Base</button>
<button class="a-btn -brand -outline">Brand</button>
<button class="a-btn -danger -outline">Danger</button>
<button class="a-btn -info -outline">Info</button>
<button class="a-btn -dark -outline">Dark</button>

Flat

To render a button with a transparent background and border, apply the class -flat.

<button class="a-btn -flat">Base</button>
<button class="a-btn -brand -flat">Brand</button>
<button class="a-btn -danger -flat">Danger</button>
<button class="a-btn -info -flat">Info</button>
<button class="a-btn -dark -flat">Dark</button>

Pill

Use the -pill modifier class to render buttons with a more pronounced border-radius.

Base

<!-- default buttons -->
<button class="a-btn -pill">Base</button>
<button class="a-btn -brand -pill">Brand</button>
<!-- special case buttons -->
<button class="a-btn -danger -pill">Danger</button>
<button class="a-btn -info -pill">Info</button>
<button class="a-btn -dark -pill">Dark</button>

Outline

<button class="a-btn -pill -outline">Base</button>
<button class="a-btn -brand -pill -outline">Brand</button>
<button class="a-btn -danger -pill -outline">Danger</button>
<button class="a-btn -info -pill -outline">Info</button>
<button class="a-btn -dark -pill -outline">Dark</button>

Icon buttons

For interfaces with limited space, an -icon button can be used for common actions such as editing, deleting, closing, etc.

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

Labeled icon buttons

<!-- left aligned -->
<button class="a-btn">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
    <span>Button</span>
  </div>
</button>
<!-- right aligned -->
<button class="a-btn">
  <div class="a-btn__content">
    <span>Button</span>
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</button>
<!-- both sides -->
<button class="a-btn">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
    <span>Button</span>
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</button>

Floating icon buttons

<button class="a-btn -float">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</button>
<button class="a-btn -brand -float">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</button>
<button class="a-btn -float -danger">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</button>
<button class="a-btn -float -info">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</button>
<button class="a-btn -float -dark">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</button>

Close icon button

<button class="a-btn -icon -close">
  <div class="a-btn__content">
    <i class="a-icon icon-x"></i>
  </div>
</button>
<button class="a-btn -icon -close">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-x"></use>
      </svg>
    </div>
  </div>
</button>

Additional sizes

Small

<button class="a-btn -small">small</button>
<button class="a-btn -small -icon">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</button>

Large

<button class="a-btn -large">large</button>
<button class="a-btn -large -icon">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</button>