Badges

Badges are used to provide extra non critical information to the user. They can be used to indicate the number of items, the state of a task, or the importance of an action. Badges can be used inside other blocks.

Design Hints

Badges are a great way to add extra information to a block. You can indicate state, availability, importance or any other small piece of information. They tend to catch the user's attention and can be used to draw attention to important information without using the alert role.

Accessibility Hints

The badge should not receive focus. If using icons inside the badge, ensure that the icon is hidden from screen readers and screen reader only text using sr-only class is used to convey the information which the icon represents. aria-label attribute will not work for non-interactive elements like badges.

Simple Badge

A set of simple multipurpose badges.

Badge Unavailable Warning Available Blue Indigo Purple Pink

<div class="flex flex-wrap justify-center gap-4">
  <span
    class="inline-flex items-center rounded-full bg-gray-300 px-3 py-1 text-sm font-medium text-black dark:bg-gray-800 dark:text-gray-50"
    >Badge</span
  >
  <span
    class="inline-flex items-center rounded-full bg-red-100 px-3 py-1 text-sm font-medium text-red-800 dark:bg-red-950 dark:text-red-50"
    >Unavailable</span
  >
  <span
    class="inline-flex items-center rounded-full bg-yellow-100 px-3 py-1 text-sm font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-50"
    >Warning</span
  >
  <span
    class="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800 dark:bg-green-950 dark:text-green-50"
    >Available</span
  >
  <span
    class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800 dark:bg-blue-950 dark:text-blue-50"
    >Blue</span
  >
  <span
    class="inline-flex items-center rounded-full bg-indigo-100 px-3 py-1 text-sm font-medium text-indigo-800 dark:bg-indigo-950 dark:text-indigo-50"
    >Indigo</span
  >
  <span
    class="inline-flex items-center rounded-full bg-purple-100 px-3 py-1 text-sm font-medium text-purple-800 dark:bg-purple-950 dark:text-purple-50"
    >Purple</span
  >
  <span
    class="inline-flex items-center rounded-full bg-pink-100 px-3 py-1 text-sm font-medium text-pink-800 dark:bg-pink-950 dark:text-pink-50"
    >Pink</span
  >
</div>

<div class="flex flex-wrap justify-center gap-4">
  <span
    class="inline-flex items-center rounded-full bg-gray-300 px-3 py-1 text-sm font-medium text-black dark:bg-gray-800 dark:text-gray-50"
    >Badge</span
  >
  <span
    class="inline-flex items-center rounded-full bg-red-100 px-3 py-1 text-sm font-medium text-red-800 dark:bg-red-950 dark:text-red-50"
    >Unavailable</span
  >
  <span
    class="inline-flex items-center rounded-full bg-yellow-100 px-3 py-1 text-sm font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-50"
    >Warning</span
  >
  <span
    class="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800 dark:bg-green-950 dark:text-green-50"
    >Available</span
  >
  <span
    class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800 dark:bg-blue-950 dark:text-blue-50"
    >Blue</span
  >
  <span
    class="inline-flex items-center rounded-full bg-indigo-100 px-3 py-1 text-sm font-medium text-indigo-800 dark:bg-indigo-950 dark:text-indigo-50"
    >Indigo</span
  >
  <span
    class="inline-flex items-center rounded-full bg-purple-100 px-3 py-1 text-sm font-medium text-purple-800 dark:bg-purple-950 dark:text-purple-50"
    >Purple</span
  >
  <span
    class="inline-flex items-center rounded-full bg-pink-100 px-3 py-1 text-sm font-medium text-pink-800 dark:bg-pink-950 dark:text-pink-50"
    >Pink</span
  >
</div>

Alternate Simple Badge

An alternate style for simple badges with outlines.

Badge Unavailable Warning Available Blue Indigo Purple Pink

<div class="flex flex-wrap justify-center gap-4">
  <span
    class="inline-flex items-center rounded-full border border-gray-500 px-3 py-1 text-sm font-medium text-gray-800 dark:border-gray-400 dark:text-gray-50"
    >Badge</span
  >
  <span
    class="inline-flex items-center rounded-full border border-red-600 px-3 py-1 text-sm font-medium text-red-800 dark:border-red-500 dark:text-red-50"
    >Unavailable</span
  >
  <span
    class="inline-flex items-center rounded-full border border-yellow-600 px-3 py-1 text-sm font-medium text-yellow-800 dark:border-yellow-500 dark:text-yellow-50"
    >Warning</span
  >
  <span
    class="inline-flex items-center rounded-full border border-green-600 px-3 py-1 text-sm font-medium text-green-800 dark:border-green-500 dark:text-green-50"
    >Available</span
  >
  <span
    class="inline-flex items-center rounded-full border border-blue-600 px-3 py-1 text-sm font-medium text-blue-800 dark:border-blue-500 dark:text-blue-50"
    >Blue</span
  >
  <span
    class="inline-flex items-center rounded-full border border-indigo-600 px-3 py-1 text-sm font-medium text-indigo-800 dark:border-indigo-500 dark:text-indigo-50"
    >Indigo</span
  >
  <span
    class="inline-flex items-center rounded-full border border-purple-600 px-3 py-1 text-sm font-medium text-purple-800 dark:border-purple-500 dark:text-purple-50"
    >Purple</span
  >
  <span
    class="inline-flex items-center rounded-full border border-pink-600 px-3 py-1 text-sm font-medium text-pink-800 dark:border-pink-500 dark:text-pink-50"
    >Pink</span
  >
</div>

<div class="flex flex-wrap justify-center gap-4">
  <span
    class="inline-flex items-center rounded-full border border-gray-500 px-3 py-1 text-sm font-medium text-gray-800 dark:border-gray-400 dark:text-gray-50"
    >Badge</span
  >
  <span
    class="inline-flex items-center rounded-full border border-red-600 px-3 py-1 text-sm font-medium text-red-800 dark:border-red-500 dark:text-red-50"
    >Unavailable</span
  >
  <span
    class="inline-flex items-center rounded-full border border-yellow-600 px-3 py-1 text-sm font-medium text-yellow-800 dark:border-yellow-500 dark:text-yellow-50"
    >Warning</span
  >
  <span
    class="inline-flex items-center rounded-full border border-green-600 px-3 py-1 text-sm font-medium text-green-800 dark:border-green-500 dark:text-green-50"
    >Available</span
  >
  <span
    class="inline-flex items-center rounded-full border border-blue-600 px-3 py-1 text-sm font-medium text-blue-800 dark:border-blue-500 dark:text-blue-50"
    >Blue</span
  >
  <span
    class="inline-flex items-center rounded-full border border-indigo-600 px-3 py-1 text-sm font-medium text-indigo-800 dark:border-indigo-500 dark:text-indigo-50"
    >Indigo</span
  >
  <span
    class="inline-flex items-center rounded-full border border-purple-600 px-3 py-1 text-sm font-medium text-purple-800 dark:border-purple-500 dark:text-purple-50"
    >Purple</span
  >
  <span
    class="inline-flex items-center rounded-full border border-pink-600 px-3 py-1 text-sm font-medium text-pink-800 dark:border-pink-500 dark:text-pink-50"
    >Pink</span
  >
</div>

Badge With Icon

An alternate style for simple badges with outlines.

Rome 32% Unstable Feature 64% New Feature

<div class="flex flex-wrap justify-center gap-4">
  <span
    class="inline-flex items-center rounded-full bg-gray-300 px-3 py-1 text-sm font-medium text-black dark:bg-gray-800 dark:text-white"
    ><svg
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      width="1rem"
      height="1rem"
      viewBox="0 0 24 24"
      class="mr-1"
      aria-labelledby="location-id"
    >
      <title id="location-id">Location</title>
      <path
        fill="currentColor"
        d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7m0 9.5a2.5 2.5 0 0 1 0-5a2.5 2.5 0 0 1 0 5"
      ></path>
    </svg>Rome</span
  >
  <span
    class="inline-flex items-center rounded-full bg-red-100 px-3 py-1 text-sm font-medium text-red-800 dark:bg-red-950 dark:text-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      width="1rem"
      height="1rem"
      viewBox="0 0 24 24"
      class="mr-1"
      aria-labelledby="down-id"
    >
      <title id="down-id">Down by</title>
      <path
        fill="currentColor"
        d="m16 18l2.29-2.29l-4.88-4.88l-4 4L2 7.41L3.41 6l6 6l4-4l6.3 6.29L22 12v6z"
      ></path>
    </svg>32%</span
  >
  <span
    class="inline-flex items-center rounded-full bg-yellow-100 px-3 py-1 text-sm font-medium text-yellow-800 dark:bg-yellow-900 dark:text-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      width="1rem"
      height="1rem"
      viewBox="0 0 24 24"
      class="mr-1"
      aria-labelledby="warning-id"
    >
      <title id="warning-id">Warning</title>
      <path fill="currentColor" d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"
      ></path>
    </svg>Unstable Feature</span
  >
  <span
    class="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800 dark:bg-green-950 dark:text-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      width="1rem"
      height="1rem"
      viewBox="0 0 24 24"
      class="mr-1"
      aria-labelledby="up-id"
    >
      <title id="up-id">Up by</title>
      <path
        fill="currentColor"
        d="m16 6l2.29 2.29l-4.88 4.88l-4-4L2 16.59L3.41 18l6-6l4 4l6.3-6.29L22 12V6z"
      ></path>
    </svg>64%</span
  >
  <span
    class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800 dark:bg-blue-950 dark:text-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      width="1rem"
      height="1rem"
      viewBox="0 0 24 24"
      class="mr-1"
      aria-labelledby="info-id"
    >
      <title id="info-id">Info</title>
      <path
        fill="currentColor"
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
      ></path>
    </svg>New Feature</span
  >
</div>

<div class="flex flex-wrap justify-center gap-4">
  <span
    class="inline-flex items-center rounded-full bg-gray-300 px-3 py-1 text-sm font-medium text-black dark:bg-gray-800 dark:text-white"
    ><svg
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      width="1rem"
      height="1rem"
      viewBox="0 0 24 24"
      class="mr-1"
      aria-labelledby="location-id"
    >
      <title id="location-id">Location</title>
      <path
        fill="currentColor"
        d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7m0 9.5a2.5 2.5 0 0 1 0-5a2.5 2.5 0 0 1 0 5"
      ></path>
    </svg>Rome</span
  >
  <span
    class="inline-flex items-center rounded-full bg-red-100 px-3 py-1 text-sm font-medium text-red-800 dark:bg-red-950 dark:text-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      width="1rem"
      height="1rem"
      viewBox="0 0 24 24"
      class="mr-1"
      aria-labelledby="down-id"
    >
      <title id="down-id">Down by</title>
      <path
        fill="currentColor"
        d="m16 18l2.29-2.29l-4.88-4.88l-4 4L2 7.41L3.41 6l6 6l4-4l6.3 6.29L22 12v6z"
      ></path>
    </svg>32%</span
  >
  <span
    class="inline-flex items-center rounded-full bg-yellow-100 px-3 py-1 text-sm font-medium text-yellow-800 dark:bg-yellow-900 dark:text-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      width="1rem"
      height="1rem"
      viewBox="0 0 24 24"
      class="mr-1"
      aria-labelledby="warning-id"
    >
      <title id="warning-id">Warning</title>
      <path fill="currentColor" d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"
      ></path>
    </svg>Unstable Feature</span
  >
  <span
    class="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800 dark:bg-green-950 dark:text-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      width="1rem"
      height="1rem"
      viewBox="0 0 24 24"
      class="mr-1"
      aria-labelledby="up-id"
    >
      <title id="up-id">Up by</title>
      <path
        fill="currentColor"
        d="m16 6l2.29 2.29l-4.88 4.88l-4-4L2 16.59L3.41 18l6-6l4 4l6.3-6.29L22 12V6z"
      ></path>
    </svg>64%</span
  >
  <span
    class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800 dark:bg-blue-950 dark:text-white"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      width="1rem"
      height="1rem"
      viewBox="0 0 24 24"
      class="mr-1"
      aria-labelledby="info-id"
    >
      <title id="info-id">Info</title>
      <path
        fill="currentColor"
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
      ></path>
    </svg>New Feature</span
  >
</div>

Badge With Other Elements

Here are some examples of using badges with other elements.

<div
  class="flex w-full flex-wrap justify-center gap-12 overflow-auto py-4 sm:flex-row"
>
  <button
    type="button"
    class="relative inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Open Messages
    <span
      class="absolute -right-2 -top-2 inline-flex items-center rounded-full bg-indigo-300 px-1 py-1 text-xs font-medium text-black"
      >18</span
    >
    <span class="sr-only">messages</span>
  </button>
  <button
    type="button"
    class="relative rounded-lg border border-gray-500 bg-gray-100 p-2 text-base font-semibold text-indigo-600 hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-60 dark:border-indigo-600 dark:bg-zinc-950 dark:text-indigo-400 dark:hover:bg-zinc-900"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="1.5rem"
      height="1.5rem"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2M1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"
      ></path>
    </svg>
    <span class="sr-only">cart</span>
    <span
      class="absolute -right-3 -top-3 inline-flex items-center rounded-full bg-red-700 px-[9px] py-1 text-xs font-medium text-white"
      >3</span
    ><span class="sr-only">Items in cart</span>
  </button>
  <button
    type="button"
    class="relative inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Fix Now
    <span
      aria-hidden="true"
      class="absolute -right-1 -top-1 inline-flex items-center rounded-full bg-red-700 p-2 font-medium text-white motion-safe:animate-ping"
    ></span>
    <span
      aria-hidden="true"
      class="absolute -right-1 -top-1 inline-flex items-center rounded-full bg-red-700 p-2 font-medium text-white"
    ></span></button
  >
</div>

<div
  class="flex w-full flex-wrap justify-center gap-12 overflow-auto py-4 sm:flex-row"
>
  <button
    type="button"
    class="relative inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Open Messages
    <span
      class="absolute -right-2 -top-2 inline-flex items-center rounded-full bg-indigo-300 px-1 py-1 text-xs font-medium text-black"
      >18</span
    >
    <span class="sr-only">messages</span>
  </button>
  <button
    type="button"
    class="relative rounded-lg border border-gray-500 bg-gray-100 p-2 text-base font-semibold text-indigo-600 hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-60 dark:border-indigo-600 dark:bg-zinc-950 dark:text-indigo-400 dark:hover:bg-zinc-900"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="1.5rem"
      height="1.5rem"
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2s-.9-2-2-2M1 2v2h2l3.6 7.59l-1.35 2.45c-.16.28-.25.61-.25.96c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12l.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2s2-.9 2-2s-.9-2-2-2"
      ></path>
    </svg>
    <span class="sr-only">cart</span>
    <span
      class="absolute -right-3 -top-3 inline-flex items-center rounded-full bg-red-700 px-[9px] py-1 text-xs font-medium text-white"
      >3</span
    ><span class="sr-only">Items in cart</span>
  </button>
  <button
    type="button"
    class="relative inline-flex rounded-lg bg-indigo-800 px-4 py-3 text-sm font-semibold text-gray-50 shadow-lg shadow-indigo-300/40 outline-offset-4 outline-black hover:bg-indigo-700 focus:outline-4 lg:py-2.5 lg:text-base dark:shadow-none dark:outline-white"
    >Fix Now
    <span
      aria-hidden="true"
      class="absolute -right-1 -top-1 inline-flex items-center rounded-full bg-red-700 p-2 font-medium text-white motion-safe:animate-ping"
    ></span>
    <span
      aria-hidden="true"
      class="absolute -right-1 -top-1 inline-flex items-center rounded-full bg-red-700 p-2 font-medium text-white"
    ></span></button
  >
</div>

Accessibility Note: The last variant uses a motion-safe:animate-ping class to create the pinging animation with motion-safe being a selector and animate-ping being a standard tailwind class. You can also use the prefers-reduced-motion media query to disable the animation if the user has reduced motion enabled. For more information about accessible animations, see this article from W3C about pause, stop and hide animations

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Badge	Yes	Yes	Yes	Yes	Yes
Alternate Simple Badge	Yes	Yes	Yes	Yes	Yes
Badge With Icon	Yes	Yes	Yes	Yes	Yes
Badge With Other Elements	Yes	Yes	Yes	Yes	Yes

There are no clear accessibility guidelines for the badge pattern described by WAI-ARIA, so ravixUI implements basic accessbility patterns applicable to all elements.