ComponentsData Display
Badge
Small status or label indicator
Examples
Badge Variants
{
"type": "flex",
"gap": 2,
"children": [
{
"type": "badge",
"label": "Default"
},
{
"type": "badge",
"label": "Secondary",
"variant": "secondary"
},
{
"type": "badge",
"label": "Outline",
"variant": "outline"
},
{
"type": "badge",
"label": "Destructive",
"variant": "destructive"
}
]
}Schema
interface BadgeSchema {
type: 'badge';
label: string;
variant?: 'default' | 'secondary' | 'outline' | 'destructive';
className?: string;
}