Buttons

<button class="btn btn-primary mr-2">Primary</button>
    <button class="btn btn-secondary mr-2">Secondary</button>
    <button class="btn btn-tertiary mr-2">Tertiary</button>
    <button class="btn btn-danger mr-2">Danger</button>
    <button class="btn btn-gray mr-2">Gray</button>
    <button class="btn btn-white mr-2">White</button>
    <button class="btn btn-link mr-2">Link</button>
    <button class="btn btn-light-blue mr-2">Light Blue</button>
    <button class="btn btn-light-green mr-2">Light Green</button>
    <button class="btn btn-light-red mr-2">Light Red</button>

<button class="btn btn-block btn-white mr-2">
      <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="aszjx32s7evz8lz72rwdj36ry5ejiqzl" class="fill-current icon-sm mr-2"><title id="aszjx32s7evz8lz72rwdj36ry5ejiqzl">Icons/download</title>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"></path></svg>
 Primary
    </button>

<a href="#" class="btn btn-primary btn-outline mr-2">Primary</a>
    <a href="#" class="btn btn-secondary btn-outline mr-2">Secondary</a>
    <a href="#" class="btn btn-tertiary btn-outline mr-2">Tertiary</a>
    <a href="#" class="btn btn-danger btn-outline mr-2">Danger</a>

<button class="btn btn-small btn-primary mr-2">Primary</button>
    <button class="btn btn-small btn-secondary mr-2">Secondary</button>
    <button class="btn btn-small btn-tertiary mr-2">Tertiary</button>
    <button class="btn btn-small btn-danger mr-2">Danger</button>
    <button class="btn btn-small btn-gray mr-2">Gray</button>
    <button class="btn btn-small btn-white mr-2">White</button>
    <button class="btn btn-small btn-link mr-2">Link</button>

<button class="btn btn-large btn-primary mr-2">Primary</button>
    <button class="btn btn-large btn-secondary mr-2">Secondary</button>
    <button class="btn btn-large btn-tertiary mr-2">Tertiary</button>
    <button class="btn btn-large btn-danger mr-2">Danger</button>
    <button class="btn btn-large btn-gray mr-2">Gray</button>
    <button class="btn btn-large btn-white mr-2">White</button>
    <button class="btn btn-large btn-link mr-2">Link</button>

<button class="btn btn-primary mr-2">
      <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="ajvsp25ld08r8f2pd1owpjevjy5ds65h" class="fill-current icon-sm mr-2"><title id="ajvsp25ld08r8f2pd1owpjevjy5ds65h">Icons/download</title>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"></path></svg>
 Primary
    </button>

    <button class="btn btn-secondary mr-2">
      <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="a5a13yb463j42mfwfz5m8kq0i81o5nu0" class="fill-current icon-sm mr-2"><title id="a5a13yb463j42mfwfz5m8kq0i81o5nu0">Icons/download</title>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"></path></svg>
 Secondary
    </button>

    <button class="btn btn-tertiary mr-2">
      <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="alcz45z8apq3yz5hupoorx2ejps1csyo" class="fill-current icon-sm mr-2"><title id="alcz45z8apq3yz5hupoorx2ejps1csyo">Icons/download</title>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"></path></svg>
 Tertiary
    </button>

    <button class="btn btn-danger mr-2">
      <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="an0qd2vyhc1nh6kdihrpsrv717zvijbo" class="fill-current icon-sm mr-2"><title id="an0qd2vyhc1nh6kdihrpsrv717zvijbo">Icons/trash</title>
<path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"></path></svg>
 Danger
    </button>

    <button class="btn btn-gray mr-2">
      <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="at3uh49gg8cvj6ynev53584y9a8b06ju" class="fill-current icon-sm mr-2"><title id="at3uh49gg8cvj6ynev53584y9a8b06ju">Icons/trash</title>
<path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"></path></svg>
 Gray
    </button>

    <button class="btn btn-white mr-2">
      <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="ahgmuq4sese1dnm2e8p8pa84xdjemydw" class="fill-current icon-sm mr-2"><title id="ahgmuq4sese1dnm2e8p8pa84xdjemydw">Icons/trash</title>
<path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"></path></svg>
 White
    </button>

    <button class="btn btn-link mr-2">
      Link <svg viewBox="0 0 20 20" width="20" height="20" role="img" aria-labelledby="ahvzgydptylg50egkew9hgi1kvgejzcn" class="fill-current icon-xs ml-2"><title id="ahvzgydptylg50egkew9hgi1kvgejzcn">Icons/arrow right</title>
<path d="M16.172 9l-6.071-6.071 1.414-1.414L20 10l-.707.707-7.778 7.778-1.414-1.414L16.172 11H0V9z"></path></svg>

    </button>

<button class="btn btn-primary mr-2" disabled><span class="when-enabled">Primary</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="afeukgaypw6o3vooxuch0zb82mmz3dtj" class="animate-spin inline-block h-4 w-4 mr-2"><title id="afeukgaypw6o3vooxuch0zb82mmz3dtj">Icons/spinner</title>
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
    <button class="btn btn-secondary mr-2" disabled><span class="when-enabled">Secondary</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="ab6bglkjtbj3vhr91ka3auzhdd31jn8m" class="animate-spin inline-block h-4 w-4 mr-2"><title id="ab6bglkjtbj3vhr91ka3auzhdd31jn8m">Icons/spinner</title>
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
    <button class="btn btn-tertiary mr-2" disabled><span class="when-enabled">Tertiary</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="a3794zari55av5tn8xpu9na3el5kae44" class="animate-spin inline-block h-4 w-4 mr-2"><title id="a3794zari55av5tn8xpu9na3el5kae44">Icons/spinner</title>
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
    <button class="btn btn-danger mr-2" disabled><span class="when-enabled">Danger</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="apytfkjx24zkikxt93jznp3oewwpn5a9" class="animate-spin inline-block h-4 w-4 mr-2"><title id="apytfkjx24zkikxt93jznp3oewwpn5a9">Icons/spinner</title>
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
    <button class="btn btn-white mr-2" disabled><span class="when-enabled">White</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="ar6y9ghwkvxbe2kxurvw9sziwgs31ohm" class="animate-spin inline-block h-4 w-4 mr-2"><title id="ar6y9ghwkvxbe2kxurvw9sziwgs31ohm">Icons/spinner</title>
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>
    <button class="btn btn-link mr-2" disabled><span class="when-enabled">Link</span><span class="when-disabled"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" role="img" aria-labelledby="amtfq247kr6ag73wtn6dxxzy2owlm8xa" class="animate-spin inline-block h-4 w-4 mr-2"><title id="amtfq247kr6ag73wtn6dxxzy2owlm8xa">Icons/spinner</title>
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...</span></button>