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
Icon: leading, trailing and icon only
Label
Label
LabelLabelLabel
LabelLabelLabelLabelLabelLabelLabelLabel
LabelLabelLabelLabelLabelLabelLabelLabel
LabelLabelLabelBadge group — leading and trailing badge
Version 4.0We’ve just released a new featureVersion 4.0We’ve just released a new featureWe’ve just released a new featureVersion 4.0
New featureWe’ve just released a new featureNew featureWe’ve just released a new featureWe’ve just released a new featureNew feature
ErrorThere was a problem with that actionErrorThere was a problem with that actionThere was a problem with that actionFix now
WarningJust to let you know this might be a problemWarningJust to let you know this might be a problemJust to let you know this might be a problemWarning
SuccessYou’ve updated your profile and detailsSuccessYou’ve updated your profile and detailsYou’ve updated your profile and detailsSuccess
Badge group — dot, sizes sm and md
Version 4.0We’ve just released a new featureVersion 4.0We’ve just released a new featureWe’ve just released a new featureVersion 4.0We’ve just released a new featureVersion 4.0
New featureWe’ve just released a new featureNew featureWe’ve just released a new featureWe’ve just released a new featureNew featureWe’ve just released a new featureNew feature
ErrorThere was a problem with that actionErrorThere was a problem with that actionThere was a problem with that actionFix nowThere was a problem with that actionFix now
WarningJust to let you know this might be a problemWarningJust to let you know this might be a problemJust to let you know this might be a problemWarningJust to let you know this might be a problemWarning
SuccessYou’ve updated your profile and detailsSuccessYou’ve updated your profile and detailsYou’ve updated your profile and detailsSuccessYou’ve updated your profile and detailsSuccess
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 |
| leadingImage | string | — | Figma Icon=Avatar / Flag — round image URL before the label |
| trailingIcon | "close" | "arrow" | ReactNode | — | Figma Icon=X / Arrow — icon after the label. "close" renders a button that calls onClose |
| onClose | () => void | — | Called when the trailing close (x) icon is clicked |
| iconOnly | boolean | false | Figma Icon=Only — square badge, children is the icon (e.g. a plus) |
BadgeGroup props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| badge* | string | — | Text inside the small badge |
| children* | ReactNode | — | Message shown next to the badge |
| color | "gray" | "brand" | "error" | "warning" | "success" | "gray" | Figma Color |
| size | "sm" | "md" | "sm" | Figma Size |
| position | "leading" | "trailing" | "leading" | Figma Theme — badge on the left or right of the message |
| filled | boolean | false | Stronger background tint on the pill |
| dot | boolean | false | Neutral pill with a colored dot instead of a colored pill |
| arrow | boolean | true | Shows the arrow icon |
| href / onClick | string / () => void | — | Makes the group a link or a button |