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…
Tinted pill badges in six colours and three sizes - for tags and categories, not for alarms.
<!--
Soft pills are for neutral labelling - categories, tags, counts of things
that are fine. The tint is decoration; the text is the label. If a pill
means "something is wrong", that belongs to the status badge with its dot.
-->
<div class="flex flex-wrap items-center gap-2">
<span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 dark:bg-gray-500/15 dark:text-gray-300">Design</span>
<span class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-800 dark:bg-blue-500/15 dark:text-blue-300">Engineering</span>
<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-1 text-xs font-medium text-green-800 dark:bg-green-500/15 dark:text-green-300">Marketing</span>
<span class="inline-flex items-center rounded-full bg-amber-100 px-2.5 py-1 text-xs font-medium text-amber-800 dark:bg-amber-400/15 dark:text-amber-300">Operations</span>
<span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-1 text-xs font-medium text-red-800 dark:bg-red-500/15 dark:text-red-300">Urgent</span>
<span class="inline-flex items-center rounded-full bg-violet-100 px-2.5 py-1 text-xs font-medium text-violet-800 dark:bg-violet-500/15 dark:text-violet-300">Research</span>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | - | Accessible label announced while loading. |
color | 'gray' | 'blue' | 'green' | 'amber' | 'red' | 'violet' | 'gray' | Color |
size | 'sm' | 'md' | 'lg' | 'md' | Size |
className | string | - | Additional classes merged onto the root element. |
Soft pills are for neutral labelling: categories, teams, topics. If a pill means "something is wrong", use the status badge with its dot instead - that distinction is a design contract, not a styling preference. Colours and sizes are flat class maps (`PILL_COLORS`, `PILL_SIZES`), so extending either is one line; keep the full class strings literal so the Tailwind scanner can see them. Dark mode swaps the 100 tint for a `/15` translucent wash, which lets the pill sit on any dark surface - a card, a modal, the page - without inventing a matching grey for each.