Badge

Importing

The component can be imported via:

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

Usage

Variants

The variant prop controls the visual style. subtle (the default) renders a lightly filled badge. solid renders a fully filled badge with contrasting text. outline renders a transparent badge with a colored border:

Colors

The Badge accepts palette hues and semantic aliases via the color prop. The default is neutral:

Semantic colors

When the color conveys meaning, use the semantic values critical, caution, success, information, accent, feature, and neutral. They map to palette hues but keep the intent readable at the call site:

Status indicator

The Badge can show a status indicator dot via the showStatusIndicator prop. Any color may be combined with the indicator. Use it for operational status that describes where something is in its lifecycle:

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: