Badge

Small inline labels for status, category, or metadata. Available in four soft palette variants with an optional animated dot indicator.

Label

Dot

Installation

npm install @bloomkit/react

import { Badge } from "@bloomkit/react";
 
<Badge variant="sage">Published</Badge>

The dot prop adds a gently breathing indicator dot, useful for live status:

<Badge variant="sage" dot>Live</Badge>
<Badge variant="rose" dot>Recording</Badge>

<Badge variant="sage">Sage</Badge>
<Badge variant="sand">Sand</Badge>
<Badge variant="lavender">Lavender</Badge>
<Badge variant="rose">Rose</Badge>

Prop	Type	Default	Description
variant	"sage" \| "sand" \| "lavender" \| "rose"	"sage"	Color palette of the badge
dot	boolean	false	Show an animated breathing dot before the label
className	string	""	Additional Tailwind classes (merged via tailwind-merge)
children	ReactNode	—	Badge label content