Component

Badge

Compact status or category label in the earthy palette.

Live demo

Rendered with the actual component source, not a re-implementation.

NewLimitedIn stockLow stockSold outMade to orderOak

import { Badge } from "./Badge.jsx";

<Badge tone="brand">New</Badge>
<Badge tone="success" dot>In stock</Badge>

Badge props — see the source .d.ts for the complete type.
Prop	Type	Default	Description
`tone`	`"neutral" \| "brand" \| "bark" \| "success" \| "warning" \| "danger" \| "info" \| "outline"`	`"neutral"`	Colour tone.
`dot`	`boolean`	`false`	Show a leading status dot.