Badge

stablev1.0.0·open in canvas

Small status label on the tinted-surface pairs — tone conveys state category, never price direction on its own.

Installnpx shadcn add @cids/badge

Live demo

neutralnewon pegdepeggedpendingbridged

Motion · tap to replay

honors reduced-motion

None (static label).

This component declares no motion.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Badge } from "@/design-system";

<Badge tone="buy">on peg</Badge>
<Badge tone="warning">pending</Badge>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

--surface-container-high
--radius-chip

States · live

Forced instances — hover/focus still work on the live demo above.

neutral

pending

brand

live

buy

on peg

sell

error

warning

drift

info

note

Small status label on the tinted-surface pairs — tone conveys state category, never price direction on its own.

Anatomy

( label )  ← rounded-chip, 11px medium, tint bg + tone text

Props

Prop	Type	Default	Notes
`tone`	`"neutral"`	"brand" \	"buy" \	"sell" \	"warning" \	"info"`	`"neutral"`	Maps to the tinted state-surface pairs.
`className`	`string`	—	cn-merged.
…rest	`HTMLAttributes<span>`	—	Pass-through.

Motion

None (static label).

· Real text = accessible name; no ARIA needed.
· State is conveyed by text + tint together, not color alone (the label says "pending", the tint reinforces).
· Sign discipline: direction belongs to the signed value beside the badge, not the badge tone.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.