Tag
When to use
Section titled “When to use”Filter chips, removable labels, lightweight categorization.
When NOT to use
Section titled “When NOT to use”Product classification columns — use ClassificationTags. Status workflow — use StatusBadge.
Podium primitives composed
Section titled “Podium primitives composed”- Podium
Text
Auto-generated from
src/components/Tag/Tag.types.ts. Do not edit by hand. Runpnpm docs:propsafter changing source JSDoc.
TagProps
Section titled “TagProps”| Prop | Type | Required | Description |
|---|---|---|---|
chipColor |
string |
No | Background color — defaults to –pds-color-opacity-black-1 (12% black) |
className |
string |
No | Additional className |
compact |
boolean |
No | Render a smaller, denser tag. Defaults to false. |
fontColor |
string |
No | Text color — defaults to –pds-color-gray-500 |
label |
string |
Yes | Tag label text |
maxWidth |
number | string |
No | Max width before text truncates with ellipsis |
onRemove |
() => void |
No | Called when the remove button is clicked |
removable |
boolean |
No | Show remove (×) button and allow removal. Defaults to true. |
style |
CSSProperties |
No | Additional inline styles merged onto the root element |
Examples
Section titled “Examples”Removable tag
Section titled “Removable tag”import { Tag } from '@nike/whisker-component-library';
<Tag label="Clearance" onRemove={() => removeFilter('clearance')} />;