StatusBadge
When to use
Section titled “When to use”Row status, incident state, workflow step indicators.
When NOT to use
Section titled “When NOT to use”KPI trends — use BadgeBar. Classification tags — use ClassificationTag.
Podium primitives composed
Section titled “Podium primitives composed”- Podium
Text
Auto-generated from
src/components/StatusBadge/StatusBadge.tsx. Do not edit by hand. Runpnpm docs:propsafter changing source JSDoc.
StatusBadgeProps
Section titled “StatusBadgeProps”Compact status indicator using Podium design tokens. Renders a pill-shaped label with a 25 % opacity tinted background. Accepts an optional leading icon and supports full color overrides.
| Prop | Type | Required | Description |
|---|---|---|---|
backgroundColor |
string |
No | Override the background color (CSS value) |
children |
React.ReactNode |
Yes | Text label displayed inside the badge |
className |
string |
No | Additional class name |
color |
string |
No | Override the text color (CSS value) |
icon |
React.ReactNode |
No | Icon element rendered before the label |
style |
React.CSSProperties |
No | Additional inline styles |
variant |
StatusBadgeVariant |
No | Visual variant controlling the color scheme |
Examples
Section titled “Examples”Warning badge
Section titled “Warning badge”import { StatusBadge } from '@nike/whisker-component-library';
<StatusBadge variant="warning">In Progress</StatusBadge>;