Standard buttons

<div class="ch-display--flex ch-flex-flow--row-wrap ch-gap--2">
  <button type="button" class="ch-btn sm:ch-ph--6">Button</button>
  <button type="button" class="ch-btn ch-btn--success">Success button</button>
  <button type="button" class="ch-btn ch-btn--primary">Primary button</button>
  <button type="button" class="ch-btn ch-btn--secondary">Secondary button</button>
  <button type="button" class="ch-btn ch-btn--danger">Danger button</button>
  <button type="button" class="ch-btn ch-btn--link">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--full sm:ch-width--auto.

Ghost buttons

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

Button sizes

Add the ch-btn--sm or ch-btn--lg class for small or large button size.

<div class="ch-display--flex ch-align-items--center ch-gap--2">
  <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>
</div>

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 ch-gap--2">
  <button type="button" class="ch-btn ch-btn--loading">Loading</button>
  <button type="button" class="ch-btn ch-btn--success ch-btn--loading">Loading</button>
  <button type="button" class="ch-btn ch-btn--primary ch-btn--loading">Loading</button>
  <button type="button" class="ch-btn ch-btn--secondary ch-btn--loading">Loading</button>
  <button type="button" class="ch-btn ch-btn--danger ch-btn--loading">Loading</button>
</div>