Badge / Chip

A pill for tags, statuses, and filter toggles. Two tones—neutral by default, solid for the 'on' state.

Tones

DraftActive

<Badge>Draft</Badge>
<Badge tone="solid">Active</Badge>

As Tag List

#react#typescript#next.js#convex#tailwind#design

{tags.map((t) => <Badge key={t}>{t}</Badge>)}

Filter Pills

AllEasyMediumHard

<Badge tone={active ? "solid" : "neutral"}>All</Badge>