Standard buttons

<div class="ch-display--flex ch-flex-flow--row-wrap">
  <button type="button" class="ch-btn sm:ch-width--2 ch-ma--1">Button</button>
  <button type="button" class="ch-btn ch-btn--success ch-ma--1">
    Success button
  </button>
  <button type="button" class="ch-btn ch-btn--primary ch-ma--1">
    Primary button
  </button>
  <button type="button" class="ch-btn ch-btn--secondary ch-ma--1">
    Secondary button
  </button>
  <button type="button" class="ch-btn ch-btn--danger ch-ma--1">
    Danger button
  </button>
  <button type="button" class="ch-btn ch-btn--link ch-ma--1">
    Link button
  </button>
</div>

Need a button that’s full width at mobile but only as big as it needs to be at larger breakpoints? Try ch-btn ch-width--12 sm:ch-width--auto.

---

Ghost buttons

<div class="ch-display--flex ch-flex-flow--row-wrap">
  <button type="button" class="ch-btn ch-btn--success ch-btn--ghost ch-ma--1">
    Success button
  </button>
  <button type="button" class="ch-btn ch-btn--primary ch-btn--ghost ch-ma--1">
    Primary button
  </button>
  <button type="button" class="ch-btn ch-btn--secondary ch-btn--ghost ch-ma--1">
    Secondary button
  </button>
  <button type="button" class="ch-btn ch-btn--danger ch-btn--ghost ch-ma--1">
    Danger button
  </button>
  <button type="button" class="ch-btn ch-btn--white ch-btn--ghost ch-ma--1">
    White button
  </button>
</div>

---

Button sizes

Add the ch-btn--sm or ch-btn--lg class for small or large button size. Also, you can add the ch-btn--block class for a full-width button.

<button type="button" class="ch-btn ch-btn--sm">Small button</button>
<button type="button" class="ch-btn">Default button</button>
<button type="button" class="ch-btn ch-btn--lg">Large button</button>

---

Loading indicator

Add ch-btn--loading to show a loading indicator. The button will also be set to pointer-events: none to stop additional clicks while the loading state is active.

<div class="ch-display--flex ch-flex-flow--row-wrap">
  <button type="button" class="ch-btn ch-btn--loading ch-ma--1">Loading</button>
  <button type="button" class="ch-btn ch-btn--success ch-btn--loading ch-ma--1">
    Loading
  </button>
  <button type="button" class="ch-btn ch-btn--primary ch-btn--loading ch-ma--1">
    Loading
  </button>
  <button
    type="button"
    class="ch-btn ch-btn--secondary ch-btn--loading ch-ma--1"
  >
    Loading
  </button>
  <button type="button" class="ch-btn ch-btn--danger ch-btn--loading ch-ma--1">
    Loading
  </button>
</div>

---