Tag
Compact label for categories, attributes, or filter pills. Size · Icon · Action · Checkbox — four independent Figma props.
{ Tag, TagGroup } from "@pepulux/ui"Size — sm · md · lg
Three sizes controlled by the size prop.
Action — "Text only" · "X close" · "Count"
action="none" (text only) · action="dismiss" (× button) · action="count" (trailing number).
Icon — Dot
dot shows a small colored circle. dotColor accepts any CSS color.
Icon — Icon leading
Pass any ReactNode as icon. Renders before the label.
Icon: Country
Figma Icon=Country — pass a flag image URL as flag.
Australia
India
Japan4Icon — Avatar
Pass an Avatar element as avatar. Renders before the label.
Checkbox — boolean
Pass checked + onChange to make a Tag toggleable. Figma Checkbox=True shows a checkbox before the label; it fills with a checkmark when checked.
Size × Action matrix
All three sizes with all three action variants.
Disabled
disabled reduces opacity and blocks all interaction.
Tag Group
Wrap multiple Tags in TagGroup for consistent gap and wrap behaviour.
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. |