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)

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' }

Slots

Name	Bindings	Description
default	—
icon	—