Chi · Button

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>

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

Sizes

Buttons supports a full spectrum of sizes: -sm, -md, -lg, -xl. The default size is -md.

<button class="a-btn -sm">Button -sm</button>
<button class="a-btn -sm -icon">
   <div class="a-btn__content">
     <div class="a-icon">
       <svg>
         <use xlink:href="#icon-atom"></use>
       </svg>
     </div>
   </div>
</button>
<button class="a-btn -md">Button -md</button>
<button class="a-btn -md -icon">
   <div class="a-btn__content">
     <div class="a-icon">
       <svg>
         <use xlink:href="#icon-atom"></use>
       </svg>
     </div>
   </div>
</button>
<button class="a-btn -lg">Button -lg</button>
<button class="a-btn -lg -icon">
   <div class="a-btn__content">
     <div class="a-icon">
       <svg>
         <use xlink:href="#icon-atom"></use>
       </svg>
     </div>
   </div>
</button>
<button class="a-btn -xl">Button -xl</button>
<button class="a-btn -xl -icon">
   <div class="a-btn__content">
     <div class="a-icon">
       <svg>
         <use xlink:href="#icon-atom"></use>
       </svg>
     </div>
   </div>
</button>