New
BadgesStatus Badge Set
Success, warning, danger and info badges - a coloured dot beside a word that carries the meaning on its own.
#badge#status#dot
5 frameworksBeginner
Loading…
A count or dot pinned to the corner of anything - button, avatar, icon - via a positioning wrapper.
<!--
The wrapper is inline-flex + relative; the badge hangs off the top-right
corner with negative offsets. The ring-2 fakes a cutout between badge and
host - it is hardcoded to the page background (white / gray-900), so if the
host sits on a card, match the ring to the card instead.
-->
<span class="relative inline-flex">
<button
type="button"
class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400"
>
<svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 6h18v12H3z" /><path d="m3 7 9 6 9-6" />
</svg>
<span class="sr-only">Inbox</span>
</button>
<span class="absolute -right-1.5 -top-1.5 inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-red-600 px-1 text-[0.6875rem] font-semibold leading-none text-white ring-2 ring-white dark:ring-gray-900">
3
<span class="sr-only">unread messages</span>
</span>
</span>| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | Content rendered inside the component. |
count | number | 0 | Number shown in the badge; anything above 99 collapses to "99+". |
max | number | 99 | Max |
dot | boolean | false | Dot |
srLabel | string | - | Sr label |
className | string | - | Additional classes merged onto the root element. |
The component is a wrapper, not a sibling: `relative inline-flex` around your host, `absolute` negative offsets for the badge, so it works on any child without measuring it. The `ring-2` fakes a cutout between badge and host; it is tinted to the page background (`ring-white dark:ring-gray-900`), so if the host sits on a card, retint the ring to the card’s surface or the illusion breaks. `dot` mode is presence-only - no number - which makes `srLabel` non-negotiable there: a 10px red circle with no text is invisible to assistive tech and cryptic to everyone else. Count mode inherits the counter badge’s cap and zero-hiding logic.