Badge
Status indicator for labels, counts, and categories. Figma V8.0: 3 types × 12 colors × 3 sizes. Icon and dot variants included.
import
{ Badge } from "@pepulux/ui"Type: Pill color — all 12 colors
DraftNewErrorWarningActiveSlateSkyBlueIndigoPurplePinkOrange
Type: Badge color — rounded-[4px]
DraftNewErrorWarningActiveSlateSkyBlueIndigoPurplePinkOrange
Type: Badge modern — no border, semibold
DraftNewErrorWarningActiveSlateSkyBlueIndigoPurplePinkOrange
Sizes — sm / md / lg
SmallMediumLarge
Icon: Dot
DraftNewErrorWarningActiveSlateSkyBlueIndigoPurplePinkOrange
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "gray" | "brand" | "error" | "warning" | "success" | "slate" | "sky" | "blue" | "indigo" | "purple" | "pink" | "orange" | "gray" | Figma Color prop — 12 colors matching V8.0 spec |
| shape | "pill" | "badge" | "modern" | "pill" | Figma Type prop — Pill color | Badge color | Badge modern |
| size | "sm" | "md" | "lg" | "sm" | Height and font size |
| dot | boolean | false | Figma Icon=Dot — shows a colored dot before the label |
| leadingIcon | ReactNode | — | Figma Icon=True — small icon before the label |