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 tag -->
<button class="a-btn">Button</button>
<!-- tags 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 light backgrounds, please use base, -primary, or -dark buttons. For dark backgrounds, please limit usage to -secondary or -light.

<!-- For light backgrounds -->
<button class="a-btn">Base</button>
<button class="a-btn -primary">Primary</button>
<button class="a-btn -dark">Dark</button>
<!-- For dark backgrounds -->
<button class="a-btn -secondary">Secondary</button>
<button class="a-btn -light">Light</button>

Outline

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

<!-- For light backgrounds -->
<button class="a-btn -primary -outline">Primary</button>
<button class="a-btn -dark -outline">Dark</button>
<!-- For dark backgrounds -->
<button class="a-btn -secondary -outline">Secondary</button>
<button class="a-btn -light -outline">Light</button>

Flat

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

<!-- For light backgrounds -->
<button class="a-btn -primary -flat">Primary</button>
<button class="a-btn -dark -flat">Dark</button>
<!-- For dark backgrounds -->
<button class="a-btn -secondary -flat">Secondary</button>
<button class="a-btn -light -flat">Light</button>

Pill

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

<button class="a-btn -pill">Button</button>

Fluid

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

<!-- left aligned content -->
<button class="a-btn -fluid">Button</button>
<!-- center aligned content -->
<button class="a-btn -fluid -justify-content--center">Button</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" aria-label="Button action">
  <div class="a-btn__content">
    <i class="a-icon icon-atom"></i>
  </div>
</button>
<!-- flat -->
<button class="a-btn -icon -flat" aria-label="Button action">
  <div class="a-btn__content">
    <i class="a-icon icon-atom"></i>
  </div>
</button>

Labeled icon buttons

<!-- left aligned -->
<button class="a-btn">
  <div class="a-btn__content">
    <i class="a-icon icon-atom"></i>
    <span>Button</span>
  </div>
</button>
<!-- right aligned -->
<button class="a-btn">
  <div class="a-btn__content">
    <span>Button</span>
    <i class="a-icon icon-atom"></i>
  </div>
</button>
<!-- both sides -->
<button class="a-btn">
  <div class="a-btn__content">
    <i class="a-icon icon-atom"></i>
    <span>Button</span>
    <i class="a-icon icon-atom"></i>
  </div>
</button>

Floating icon buttons

<!-- For light backgrounds -->
<button class="a-btn -float" aria-label="Button action">
  <div class="a-btn__content">
    <i class="a-icon icon-atom"></i>
  </div>
</button>
<button class="a-btn -primary -float" aria-label="Button action">
  <div class="a-btn__content">
    <i class="a-icon icon-atom"></i>
  </div>
</button>
<button class="a-btn -dark -float" aria-label="Button action">
  <div class="a-btn__content">
    <i class="a-icon icon-atom"></i>
  </div>
</button>
<!-- For dark backgrounds -->
<button class="a-btn -secondary -float" aria-label="Button action">
  <div class="a-btn__content">
    <i class="a-icon icon-atom"></i>
  </div>
</button>
<button class="a-btn -light -float" aria-label="Button action">
  <div class="a-btn__content">
    <i class="a-icon icon-atom"></i>
  </div>
</button>

<button class="a-btn -icon -close" aria-label="Close">
  <div class="a-btn__content">
    <i class="a-icon icon-x"></i>
  </div>
</button>

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

Danger

For special cases, such as styling a destructive action in an application (e.g. Delete Account), a -danger button may be used.

<button class="a-btn -danger">Danger</button>
<button class="a-btn -danger -outline">Danger</button>
<button class="a-btn -danger -flat">Danger</button>

Sizes

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

-sm

-md

-lg

-xl

<!-- sm -->
<button class="a-btn -sm">Button</button>
<button class="a-btn -sm -icon" aria-label="Button action">
   <div class="a-btn__content">
     <i class="a-icon icon-atom"></i>
   </div>
</button>
<!-- md -->
<button class="a-btn -md">Button</button>
<button class="a-btn -md -icon" aria-label="Button action">
   <div class="a-btn__content">
     <i class="a-icon icon-atom"></i>
   </div>
</button>
<!-- lg -->
<button class="a-btn -lg">Button</button>
<button class="a-btn -lg -icon" aria-label="Button action">
   <div class="a-btn__content">
     <i class="a-icon icon-atom"></i>
   </div>
</button>
<!-- xl -->
<button class="a-btn -xl">Button</button>
<button class="a-btn -xl -icon" aria-label="Button action">
   <div class="a-btn__content">
     <i class="a-icon icon-atom"></i>
   </div>
</button>