Badge
Badge is a visual indicator for a small piece of information: a status, a count or a category label.
Badge is not interactive. Pick its color for meaning (danger, success, warning…), not for looks.
NewActive12
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Badge } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
FilledTintOutlineGhost
Appearance
filled (default), tint, outline, ghost.
BrandDangerSuccessWarningInformativeSubtle
Semantic colors
brand, danger, success, warning, informative, subtle.
ApprovedPendingRejectedDraft
Status tints
Lower contrast than filled, which suits dense tables and lists.
51299+Featured
Size & shape
small → extra-large; circular (default), rounded, square.
Usage
Do
- Keep Badge content very short (1–2 words or a number).
- Place the Badge next to the object it describes.
Don't
- Don't use Badge as a button.
- Don't use the danger or success colors only as decoration.
Props
| Prop · Type | Default | Description |
|---|---|---|
| appearance"filled" | "tint" | "outline" | "ghost" | Default: "filled" | Display style. |
| color"brand" | "danger" | "success" | "warning" | "informative" | "subtle" | Default: "brand" | Semantic color. |
| size"small" | "medium" | "large" | "extra-large" | Default: "medium" | Height 16 / 20 / 24 / 32px. |
| shape"circular" | "rounded" | "square" | Default: "circular" | Corner rounding. |
| iconReactNode | Default: — | Icon placed before the content. |