SegmentedQuantity

When to use

RFID/inventory views showing multi-location SOH. Used by DataTable columnType: 'RFID'.

When NOT to use

Single aggregate counts — use plain Text. Non-inventory numbers.

Podium primitives composed

• Podium Text

Common pitfalls

• Set offsiteEnabled={false} when store has no offsite data to avoid empty segment.
• Align offsiteEnabled with store config and DataTable RFID column.

Props

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

SegmentedQuantityProps

Segmented stock-on-hand display for Sales Floor, Back of House, and Offsite. Used standalone or via DataTable columnType: 'RFID'. Align offsiteEnabled with store-level offsite configuration.

Prop	Type	Required	Description
as	ElementType	No	Polymorphic root element. Default: 'span'
className	string	No	Additional CSS class name.
color	string	No	Podium text color token or CSS color for quantity values.
font	PodiumFont	No	Podium typography token for quantity text.
offsiteEnabled	boolean	No	When false, the Offsite segment is never rendered regardless of offSiteQuantity. Mirrors the store-level offsite feature flag. Default: true
offSiteQuantity	null | number | string	No	Offsite quantity; segment hidden when offsiteEnabled is false.
salesFloorQuantity	null | number | string	No	Sales floor quantity segment.
stockRoomQuantity	null | number | string	No	Back of house / stock room quantity segment.
strikethrough	boolean	No	Render quantities with strikethrough (e.g. zeroed-out SOH).
style	CSSProperties	No	Inline styles on the root element.
uppercase	boolean	No	Uppercase segment labels.
weight	'bold' | 'medium' | 'regular'	No	Font weight for quantity values.

Examples

Floor and BOH only

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

<SegmentedQuantity salesFloorQuantity={12} stockRoomQuantity={8} offsiteEnabled={false} />;

Live playground