Badge Component Playground
Status badges with optional leading icon. Based on OPS Design Library (Figma).
Props
Preview
Label
<Badge label="Label" color="Positive" emphasis="Subtle" size="Small" showLeadingIcon />
All variants (Figma grid)
5 colors × (2 emphases × 3 sizes) with leading icon
| Color | Small Subtle | Small Intense | Medium Subtle | Medium Intense | Large Subtle | Large Intense |
|---|---|---|---|---|---|---|
| Positive | Label | Label | Label | Label | Label | Label |
| Negative | Label | Label | Label | Label | Label | Label |
| Notice | Label | Label | Label | Label | Label | Label |
| Neutral | Label | Label | Label | Label | Label | Label |
| Primary | Label | Label | Label | Label | Label | Label |
Without leading icon
Label
Label