Skip to content

Badge

Badge — compact uppercase status/category label. Soft-tint by default; pass solid for a filled chip.

<Badge tone="teal">In stock</Badge>
<Badge tone="sky" solid>New</Badge>
<Badge tone="danger">Backordered</Badge>

Tones: navy, sky, green, teal, purple, gray, warning, danger.


Source: Badge.jsx · Badge.d.ts · category: core · live: kitchen sink