Myna UI

Badges

Basic

Last Edited on January 25, 2022

Badge Badge Badge Badge
<span
  class="rounded-full border border-gray-100 bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800">
  Badge
</span>
<span
  class="rounded border border-gray-100 bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800">
  Badge
</span>

<span
  class="rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  Badge
</span>
<span
  class="rounded border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  Badge
</span>

Light Colors

Last Edited on January 25, 2022

Badge Badge Badge Badge Badge Badge Badge Badge
<span
  class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800">
  Badge
</span>
<span
  class="rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-800">
  Badge
</span>
<span
  class="rounded-full bg-yellow-100 px-3 py-1 text-xs font-medium text-yellow-800">
  Badge
</span>
<span
  class="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-800">
  Badge
</span>
<span
  class="rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800">
  Badge
</span>
<span
  class="rounded-full bg-indigo-100 px-3 py-1 text-xs font-medium text-indigo-800">
  Badge
</span>
<span
  class="rounded-full bg-purple-100 px-3 py-1 text-xs font-medium text-purple-800">
  Badge
</span>
<span
  class="rounded-full bg-pink-100 px-3 py-1 text-xs font-medium text-pink-800">
  Badge
</span>

With Dot

Last Edited on January 25, 2022

Badge Badge Badge Badge
<span
  class="flex items-center space-x-1.5 rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-gray-600"></span>
  <span>Badge</span>
</span>
<span
  class="flex items-center space-x-1.5 rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-red-600"></span>
  <span>Badge</span>
</span>
<span
  class="flex items-center space-x-1.5 rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-green-600"></span>
  <span>Badge</span>
</span>
<span
  class="flex items-center space-x-1.5 rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-600"></span>
  <span>Badge</span>
</span>

Close Button

Last Edited on January 25, 2022

Badge Badge
<span
  class="flex items-center rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  <span>Badge</span>
  <button type="button" class="group ml-1 -mr-0.5 shrink-0 rounded-full">
    <svg
      class="h-3 w-3 stroke-gray-600 group-hover:stroke-black"
      viewBox="0 0 256 256">
      <line
        x1="200"
        y1="56"
        x2="56"
        y2="200"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="26"></line>
      <line
        x1="200"
        y1="200"
        x2="56"
        y2="56"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="26"></line>
    </svg>
  </button>
</span>
<span
  class="flex items-center rounded-full border border-gray-100 bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800">
  <span>Badge</span>
  <button type="button" class="group ml-1 -mr-0.5 shrink-0 rounded-full">
    <svg
      class="h-3 w-3 stroke-gray-600 group-hover:stroke-black"
      viewBox="0 0 256 256">
      <line
        x1="200"
        y1="56"
        x2="56"
        y2="200"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="26"></line>
      <line
        x1="200"
        y1="200"
        x2="56"
        y2="56"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="26"></line>
    </svg>
  </button>
</span>

Only Dot

Last Edited on January 25, 2022

<span class="h-2 w-2 shrink-0 rounded-full bg-gray-500"></span>
<span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500"></span>
<span class="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
<span class="relative flex h-2 w-2">
  <span
    class="absolute h-full w-full shrink-0 animate-ping rounded-full bg-blue-500"></span>
  <span class="h-full w-full shrink-0 rounded-full bg-blue-500"></span>
</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-yellow-500"></span>

Numbers

Last Edited on January 25, 2022

57 2 293 14k 0
<span
  class="shrink-0 rounded-full bg-gray-500 px-1 font-mono text-xs font-medium tracking-tight text-white">
  57
</span>
<span
  class="shrink-0 rounded-full bg-emerald-500 px-1 font-mono text-xs font-medium tracking-tight text-white">
  2
</span>
<span
  class="shrink-0 rounded-full bg-red-500 px-1 font-mono text-xs font-medium tracking-tight text-white">
  293
</span>
<span
  class="shrink-0 rounded-full bg-blue-500 px-1 font-mono text-xs font-medium tracking-tight text-white">
  14k
</span>
<span
  class="shrink-0 rounded-full bg-yellow-500 px-1 font-mono text-xs font-medium tracking-tight text-white">
  0
</span>