Skip to main content

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

Alternate Simple Badge

An alternate style for simple badges with outlines.

Badge Unavailable Warning Available Blue Indigo Purple Pink

Badge With Icon

An alternate style for simple badges with outlines.

Location Rome Down by 32% Warning Unstable Feature Up by 64% Info New Feature

Badge With Other Elements

Here are some examples of using badges with other elements.

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

ComponentNVDAWindows NarratorWAVEAxeIBM Equal Access
Simple BadgeYesYesYesYesYes
Alternate Simple BadgeYesYesYesYesYes
Badge With IconYesYesYesYesYes
Badge With Other ElementsYesYesYesYesYes

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