Chi Design System

Buttons

Description

Use buttons as triggers for actions. Try to avoid the usage of buttons for navigation and use links for that purpose instead.

Button styles

Default buttons

<button class="a-btn -solid">solid</button>

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

<button class="a-btn -outline">outline</button>

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

<button class="a-btn -flat">flat</button>

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

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

Primary buttons

<button class="a-btn -primary -solid">solid</button>

<button class="a-btn -primary -icon -solid">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

<button class="a-btn -primary -outline">outline</button>

<button class="a-btn -primary -icon -outline">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

<button class="a-btn -primary -flat">flat</button>

<button class="a-btn -primary -icon -flat">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

<button class="a-btn -primary -float">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

Danger buttons

<button class="a-btn -danger -solid">solid</button>

<button class="a-btn -danger -icon -solid">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

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

<button class="a-btn -danger -icon -outline">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

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

<button class="a-btn -danger -icon -flat">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

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

Info buttons

<button class="a-btn -info -solid">solid</button>

<button class="a-btn -info -icon -solid">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

<button class="a-btn -info -outline">outline</button>

<button class="a-btn -info -icon -outline">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

<button class="a-btn -info -flat">flat</button>

<button class="a-btn -info -icon -flat">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

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

Dark buttons

<button class="a-btn -dark -solid">solid</button>

<button class="a-btn -dark -icon -solid">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

<button class="a-btn -dark -outline">outline</button>

<button class="a-btn -dark -icon -outline">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

<button class="a-btn -dark -flat">flat</button>

<button class="a-btn -dark -icon -flat">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

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

Button sizes

<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="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

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

<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="#workspace"></use>
      </svg>
    </div>
  </div>
</button>

Buttons containing icons

Left aligned

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

Both sides

<button class="a-btn">
  <div class="a-btn__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
    <span>Button</span>
    <div class="a-icon">
      <svg>
        <use xlink:href="#workspace"></use>
      </svg>
    </div>
  </div>
</button>