Badge

Importing

The component can be imported via:

import { Badge } from '@customerio/pluma-components/react';

Usage

Colors

The Badge component accepts a range of colors via the color prop. The default, neutral, fits any badge whose color carries no particular meaning, regardless of content. Counts and other numeric quantities can also use accent, neutral-outline, and accent-outline for more or less emphasis. Use the named hue colors or the semantic colors to communicate a category, metadata, or status:

Semantic colors

When the color conveys meaning, use the semantic values critical, caution, success, and information — they render identically to red, yellow, green, and blue, but keep the intent readable at the call site. neutral — the default — is the semantic alias of grey: it marks a badge that carries no categorical meaning. Use the raw colors for purely decorative categorization:

Status indicator

For the semantic colors and the red, yellow, green, blue, purple, and grey colors, the Badge can show a status indicator dot via the showStatusIndicator prop. Use it for operational status that describes where something is in its lifecycle. Prefer a semantic color with the indicator when the status dot implies the color carries meaning that aligns with the semantics:

Bold

Badge text renders in a bold font weight by default. Set bold={false} for a less visually prominent badge. Light text is not compatible with status indicators: