Badges

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-gray-100 text-gray-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-red-100 text-red-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-orange-100 text-orange-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-yellow-100 text-yellow-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-green-100 text-green-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-teal-100 text-teal-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-blue-100 text-blue-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-violet-100 text-violet-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-violet-100 text-violet-800">Badge</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-pink-100 text-pink-800">Badge</span>

<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-gray-100 text-gray-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-red-100 text-red-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-orange-100 text-orange-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-yellow-100 text-yellow-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-green-100 text-green-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-teal-100 text-teal-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-blue-100 text-blue-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-violet-100 text-violet-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-violet-100 text-violet-800">Badge</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-pink-100 text-pink-800">Badge</span>

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-violet-100 text-violet-800">
  <svg class="icon icon--circle-medium -ml-0.5 mr-0.5 icon-xs text-violet-400" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-circle-medium"></use></svg>
  Small
</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-violet-100 text-violet-800">
  <svg class="icon icon--circle-medium -ml-0.5 mr-0.5 icon-xs text-violet-400" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-circle-medium"></use></svg>
  Large
</span>

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-violet-100 text-violet-800">
  Small
  <button type="button" class="flex-shrink-0 -mr-0.5 ml-0.5 inline-flex text-violet-500 focus:outline-none focus:text-violet-700">
    <svg class="icon icon--close icon-xs" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-close"></use></svg>
  </button>
</span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-xs font-medium leading-5 bg-violet-100 text-violet-800">
  Large
  <button type="button" class="flex-shrink-0 -mr-0.5 ml-0.5 inline-flex text-violet-500 focus:outline-none focus:text-violet-700">
    <svg class="icon icon--close icon-xs" role="img" fill="currentColor" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="/assets/img/sprite.svg#icon-close"></use></svg>
  </button>
</span>