Badge

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-primary text-primary-foreground">Primary</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-muted text-muted-foreground">Secondary</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-red-500 text-white">Destructive</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-green-500 text-white">Success</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-yellow-500 text-white">Warning</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-blue-500 text-white">Info</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-purple-500 text-white">Purple</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-orange-500 text-white">Orange</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-pink-500 text-white">Pink</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-teal-500 text-white">Teal</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-primary text-primary">Primary Outline</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-muted-foreground text-muted-foreground">Secondary Outline</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-red-500 text-red-500">Destructive Outline</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-green-500 text-green-500">Success Outline</span>

<span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold border border-yellow-500 text-yellow-500">Warning Outline</span>