CnStatusBadge

Color-coded pill badge for status, priority, or category display. Supports automatic variant resolution via colorMap.

Try it

Loading CnStatusBadge playground…

Props

Prop	Type	Default	Description
label	String	''	Display text
variant	String	'default'	'default', 'primary', 'success', 'warning', 'error', 'info'
size	String	'medium'	'small' or 'medium'
solid	Boolean	false	Use solid background with white text instead of light background with colored text
colorMap	Object	null	Map label values to variants (case-insensitive)
colorKey	String	''	Look this up in colorMap instead of the label. Use it when the label is translated but the map is keyed on the raw value (e.g. a schema enum code) — otherwise a translated label matches nothing and the badge falls back to variant.

Slots

Slot	Description
default	Custom label content
#icon	Icon element displayed before the label text

Usage

<!-- Manual variant -->
<CnStatusBadge label="Active" variant="success" />

<!-- Solid variant — for use on colored backgrounds -->
<CnStatusBadge label="Active" variant="success" :solid="true" />

<!-- Auto-resolved from colorMap -->
<CnStatusBadge
  :label="contact.status"
  :colorMap="{
    active: 'success',
    inactive: 'error',
    lead: 'warning',
    prospect: 'info',
  }" />

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnStatusBadge.vue and update automatically whenever the component changes.

Props

Name	Type	Required	Default	Description
label	string		''	Badge label text
variant	string		'default'	Color variant: 'default', 'primary', 'success', 'warning', 'error', 'info'
size	string		'medium'	Size: 'small' or 'medium'
solid	boolean		false	Use solid background with white text instead of light background with colored text. Useful when the badge is placed on a colored background (e.g., an active card).
colorMap	object		null	Map of label values to variants. When provided, the variant is resolved from this map using the label (case-insensitive). Falls back to the variant prop. { open: 'success', closed: 'default', overdue: 'error' }
colorKey	string		''	Key to look up in colorMap instead of the label. Set this when the label is a translated/display string but the map is keyed on the raw value (e.g. a schema enum code) — without it a translated label misses every map entry and the badge silently falls back to variant.

Slots

Name	Bindings	Description
default	—
icon	—