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 pill badge with an inline SVG beside the label - the icon decorates, the text informs.
<!--
The icon is aria-hidden and sized in em-relative units (h-3.5 ≈ cap height
at text-xs) so it scales with the label instead of towering over it. The
label is never optional - an icon-only badge is a rebus, not a badge.
-->
<span class="inline-flex items-center gap-1.5 rounded-full bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-800 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-500/10 dark:text-blue-300 dark:ring-blue-400/30">
<svg viewBox="0 0 16 16" class="h-3.5 w-3.5" fill="currentColor" aria-hidden="true">
<path d="M8.9 1.2 3.3 8.5a.5.5 0 0 0 .4.8h2.9l-.6 5a.5.5 0 0 0 .9.4l5.7-7.4a.5.5 0 0 0-.4-.8H9.3l.5-4.9a.5.5 0 0 0-.9-.4Z" />
</svg>
Fast track
</span>| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | - | Accessible label announced while loading. |
icon | ReactNode | - | Icon element rendered alongside the content. |
className | string | - | Additional classes merged onto the root element. |
The icon slot takes any inline SVG as a `ReactNode`; the default bolt shows the pattern to copy: `aria-hidden`, `fill="currentColor"` so it inherits the badge’s text colour in both themes, and `h-3.5` so it sits on the cap height of `text-xs` instead of towering over it. The label is required by design - an icon-only badge is a rebus, and this component refuses to be one. To recolour, change the pill’s tint classes once; the icon follows automatically through `currentColor`, which is the entire reason to prefer it over a hardcoded fill.