Button Components

Basic Usage

<div class="btns">
  <a class="btn" href="#">Button (a tag)</a>
  <button class="btn">Button (button tag)</button>
</div>

Variants

Colored Buttons

White Button Black Button

Lightest Button Light Button Neutral Button Dark Button Darkest Button

Primary Button Secondary Button Tertiary Button Quaternary Button

Success Button Error Button Warning Button Notice Button Info Button Deprecated Button Decorative Button Muted Button

<div class="btns">
  <a class="btn btn-white" href="#">White Button</a>
  <a class="btn btn-black" href="#">Black Button</a>
  <hr class="w-full border-0">
  <a class="btn btn-lightest" href="#">Lightest Button</a>
  <a class="btn btn-light" href="#">Light Button</a>
  <a class="btn btn-neutral" href="#">Neutral Button</a>
  <a class="btn btn-dark" href="#">Dark Button</a>
  <a class="btn btn-darkest" href="#">Darkest Button</a>
  <hr class="w-full border-0">
  <a class="btn btn-primary" href="#">Primary Button</a>
  <a class="btn btn-secondary" href="#">Secondary Button</a>
  <a class="btn btn-tertiary" href="#">Tertiary Button</a>
  <a class="btn btn-quaternary" href="#">Quaternary Button</a>
  <hr class="w-full border-0">
  <a class="btn btn-success" href="#">Success Button</a>
  <a class="btn btn-error" href="#">Error Button</a>
  <a class="btn btn-warning" href="#">Warning Button</a>
  <a class="btn btn-notice" href="#">Notice Button</a>
  <a class="btn btn-info" href="#">Info Button</a>
  <a class="btn btn-deprecated" href="#">Deprecated Button</a>
  <a class="btn btn-decorative" href="#">Decorative Button</a>
  <a class="btn btn-muted" href="#">Muted Button</a>
</div>