BadgeBar

When to use

Dashboard headers showing multiple KPIs with period-over-period trend. Also used as a DataTable column type (columnType: 'BADGE_BAR').

When NOT to use

Single status pills — use StatusBadge. Full charts — use SimpleHorizontalBarChart.

Podium primitives composed

Podium Text

Props

Auto-generated from src/components/BadgeBar/BadgeBar.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

BadgeBarProps

Prop	Type	Required	Description
`agedInventory`	`boolean`	No	Marks the item as aged inventory. When `true`, renders the Time icon + elapsed-day badge. Automatically suppresses `newItem` — an aged item cannot be new. Defaults to `false`.
`bins`	`null \| string \| string[]`	No	Bin assignment data — accepts the raw value from the API. A non-empty string or non-empty array renders the binned (Orders) icon. `null`, `undefined`, empty string, or empty array all render the unbinned (Orders + slash) icon.
`clearance`	`boolean`	No	Marks the item as a clearance item. Defaults to `false`.
`fullSizeRun`	`boolean`	No	Indicates a full size run is available. Defaults to `false`.
`lastReceived`	`string`	No	ISO 8601 date string of when the item was last received (e.g. `"2025-10-01"`). Used together with `agedInventory` to calculate and display the elapsed day count. If omitted or unparseable the badge still shows but without a numeric day label.
`newItem`	`boolean`	No	Marks the item as newly added inventory. Defaults to `false`. Suppressed automatically when `agedInventory` is `true` — an aged item cannot be new.
`onDisplay`	`boolean`	No	Indicates the item is currently on display. Defaults to `false`.
`pendingMarkdown`	`boolean`	No	Indicates the item has a pending markdown. Defaults to `false`.
`represented`	`boolean`	No	Indicates the item is represented on the salesfloor. Defaults to `false`.
`topSeller`	`boolean`	No	Marks the item as a top seller. Defaults to `false`.
`trend`	`null \| Trend`	No	Week-over-week sales trend direction
`unitsInbound`	`boolean`	No	Indicates units are currently inbound. Defaults to `false`.

Examples

Three KPI badges

import { BadgeBar } from '@nike/whisker-component-library';

<BadgeBar
  badges={[
    { label: 'Units', value: '1,204', trend: 'up', delta: '+12%' },
    { label: 'Revenue', value: '$48K', trend: 'flat' },
  ]}
/>;

Live playground