Tag
Compact label for categories, attributes, or filter pills. Size · Icon · Action · Checkbox — four independent Figma props.
import
{ Tag, TagGroup } from "@pepulux/ui"Size — sm · md · lg
Three sizes controlled by the size prop.
Small
Medium
Large
Action — "Text only" · "X close" · "Count"
action="none" (text only) · action="dismiss" (× button) · action="count" (trailing number).
Label
Label
Label5
Icon — Dot
dot shows a small colored circle. dotColor accepts any CSS color.
Active
Pending
Closed
Icon — Icon leading
Pass any ReactNode as icon. Renders before the label.
Global
Global
Global
Icon — Avatar
Pass an Avatar element as avatar. Renders before the label.
ACAlice Chen
BSBob Singh
Checkbox — boolean
Pass checked + onChange to make a Tag toggleable. A checkmark appears when checked.
React
TypeScript
Tailwind
Next.js
Figma
Size × Action matrix
All three sizes with all three action variants.
sm
Label
Label
Label5
md
Label
Label
Label5
lg
Label
Label
Label5
Disabled
disabled reduces opacity and blocks all interaction.
Disabled
Disabled
Disabled
Tag Group
Wrap multiple Tags in TagGroup for consistent gap and wrap behaviour.
React
TypeScript
Tailwind
Next.js
Figma
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Text content of the tag. |
| size | "sm" | "md" | "lg" | "md" | Tag height: sm=24px, md=24px wider, lg=28px. |
| dot | boolean | false | Shows a colored dot before the label (Figma: Icon=Dot). |
| dotColor | string | "var(--brand)" | CSS color for the dot. |
| icon | ReactNode | — | Any icon element before the label (Figma: Icon=Icon). |
| avatar | ReactNode | — | Avatar element before the label (Figma: Icon=Avatar). |
| action | "none" | "dismiss" | "count" | "none" | Trailing element: none (text only) · dismiss (×) · count (number). Maps to Figma Action prop. |
| count | number | — | Number shown when action='count'. |
| onDismiss | () => void | — | Called when the × dismiss button is clicked. |
| checked | boolean | — | Makes the tag a toggle (Figma: Checkbox). Shows checkmark when true. |
| onChange | (checked: boolean) => void | — | Called when a checkable tag is toggled. |
| disabled | boolean | false | Reduces opacity and blocks all interaction. |