ClassificationTags
When to use
Section titled “When to use”DataTable columnType: 'CLASSIFICATION' or product cards showing division, gender, category.
When NOT to use
Section titled “When NOT to use”Arbitrary labels — use Tag. Single status — use StatusBadge.
Podium primitives composed
Section titled “Podium primitives composed”- Podium
Text
Auto-generated from
src/components/Tag/ClassificationTags.types.ts. Do not edit by hand. Runpnpm docs:propsafter changing source JSDoc.
ClassificationTagProps
Section titled “ClassificationTagProps”| Prop | Type | Required | Description |
|---|---|---|---|
compact |
boolean |
No | Compact rendering: smaller font and reduced padding. |
size |
'medium' | 'small' |
No | MUI Chip size. Defaults to “small”. |
type |
ClassificationType |
Yes | Which dimension this badge represents — drives the color mapping. |
value |
string |
Yes | The display value (e.g. “Footwear”, “Womens”, “Running”). |
width |
number |
No | Fixed chip width in pixels. |
ClassificationTagsProps
Section titled “ClassificationTagsProps”| Prop | Type | Required | Description |
|---|---|---|---|
className |
string |
No | — |
compact |
boolean |
No | Compact rendering for all tags in the group. |
equalize |
boolean |
No | Make all tag chips the same width as the widest chip in the group. |
size |
'medium' | 'small' |
No | MUI Chip size applied to all tags. Defaults to “small”. |
stack |
'horizontal' | 'vertical' |
No | Layout direction. 'horizontal' wraps in a row; 'vertical' stacks. Default: 'horizontal' |
style |
CSSProperties |
No | — |
tags |
Array<{ type: ClassificationType; value: string; }> |
Yes | Array of classification tags to render. Each item needs a type (gender/division/category) and value (display string). |
Examples
Section titled “Examples”Classification row
Section titled “Classification row”import { ClassificationTags } from '@nike/whisker-component-library';
<ClassificationTags data={{ division: 'Apparel', genderAge: 'Mens', retailCategory: 'Tops' }} />;