ObjectUIObjectUI
ComponentsData Display

Badge

Small status or label indicator

Examples

Badge Variants

Default
Secondary
Outline
Destructive
{
  "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;
}

Semantic

Semantic HTML5 elements for structured content (header, nav, main, aside, section, article, footer)

Avatar

User profile image or fallback initials

On this page

ExamplesSchema