A badge labels a short piece of content. Six variants share the semantic color tokens with callouts.

All variants

Six variants

default gold info warning error success

badge('default');
badge('gold', 'gold');
badge('info', 'info');
badge('warning', 'warning');
badge('error', 'error');
badge('success', 'success');

In context

Inline usage

Deploy status: deploying new deprecated

'Deploy status: ' + badge('deploying', 'info') + ' ' + badge('new', 'gold');

Props

Option	Type	Default	Description
text	string	—	Badge label (first argument).
variant	'default' | 'gold' | 'info' | 'warning' | 'error' | 'success'	'default'	Semantic variant.

Notes

• Variants map to --cpd-* semantic tokens; gold keeps the brand accent for special highlights.
• Renders as <span class="cpd-badge cpd-badge-<variant>">.