Components

Badge

Small status / category marker carrying a domain accent or the live hue.

Preview

components/core/Badge.jsx

NeutralEditorialContentCraftAccent

SolidSolidIn motionExplored

Use Badge when the mark carries meaning (status, category). For neutral metadata tags, use Chip.

Usage

src/components/ui/Badge.tsx

tsx

import { Badge } from "@/components/ui/Badge";

<Badge tone="editorial">Design Leadership</Badge>
<Badge tone="craft" variant="solid">Design Systems</Badge>
<Badge tone="live" variant="dot">In motion</Badge>

API

props

Prop	Type	Default	Description
tone	"neutral" \| "editorial" \| "content" \| "craft" \| "live" \| "accent"	"neutral"	Domain accent or status hue the badge carries. "accent" inherits the active data-stream.
variant	"soft" \| "solid" \| "dot"	"soft"	Tinted fill, filled pill, or a leading dot only (live tone pulses).
children	ReactNode	—	Label content — set uppercase and wide-tracked automatically.

Tokens consumed

semantic only

--signal-editorial--signal-content--signal-craft--signal-live--accent--color-bg-elevated--color-border--surface-contrast--on-contrast--radius-pill--text-2xs