CataUiStatusLabel

A status label component that displays a colored label with customizable appearance.

Sizes & Types

small

medium

large

UI Library Status Colors

Info

Warning

Error

Success

Examples

Basic Usage

<!-- Different types -->
<CataUiStatusLabel label="Default" />
<CataUiStatusLabel label="Dark" type="dark" />
<CataUiStatusLabel label="Solid" type="solid" />

Different Sizes

<CataUiStatusLabel label="Small" size="small" />
<CataUiStatusLabel label="Medium" size="medium" />
<CataUiStatusLabel label="Large" size="large" />

UI Library Status Colors

<!-- Using UI Library status colors -->
<CataUiStatusLabel label="Info" color="#85A3FF" />
<CataUiStatusLabel label="Warning" color="#F15619" />
<CataUiStatusLabel label="Error" color="#EA2A4A" />
<CataUiStatusLabel label="Success" color="#15803D" />

Props

Prop	Description	Type	Default	Required	Options
color	Sets the status label color (supports hex color codes only)	String	'#008CAB'	false	Any valid hex color code
label	The text displayed within the status label	String		true
size	Determines the font size of the status label	String	'small'	false	'small', 'medium', 'large'
type	Defines the visual style of the status label	String	'light'	false	'light', 'dark', 'solid'

Warning

Important notes about the color prop:

Only accepts hex color codes (e.g., '#FF5733')
CSS variables (e.g., 'var(--color-primary)') are NOT supported
If providing a hex code without '#', it will be automatically prefixed (e.g., 'FF5733' becomes '#FF5733')
Recommended UI Library colors: '#85A3FF' (info), '#F15619' (warning), '#EA2A4A' (error), '#15803D' (success)