import { Badge } from 'gnome-ui/badge';
import { CheckCircle2, AlertTriangle, Zap } from 'lucide-react';

export function BadgeDefault() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>Default</Badge>
      <Badge variant="primary"><Zap className="h-2.5 w-2.5" /> Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="success"><CheckCircle2 className="h-2.5 w-2.5" /> Success</Badge>
      <Badge variant="warning"><AlertTriangle className="h-2.5 w-2.5" /> Warning</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Anatomy

import { Badge } from 'gnome-ui/badge';

<Badge variant="primary" size="md">
  Label
</Badge>

Examples

All Variants

Seven semantic variants covering the full range of contextual states.

import { Badge } from 'gnome-ui/badge';

export function BadgeVariants() {
  const variants = ["default", "primary", "secondary", "success", "warning", "destructive", "outline"];
  return (
    <div className="flex flex-wrap gap-2">
      {variants.map((v) => (
        <Badge key={v} variant={v as any}>{v}</Badge>
      ))}
    </div>
  );
}

---

Sizes

Three sizes — use sm for dense UIs, md (default) for standard use, and lg for prominent labels.

import { Badge } from 'gnome-ui/badge';
import { Star } from 'lucide-react';

export function BadgeSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="primary" size="sm"><Star className="h-2 w-2" /> Small</Badge>
      <Badge variant="primary" size="md"><Star className="h-2.5 w-2.5" /> Medium</Badge>
      <Badge variant="primary" size="lg"><Star className="h-3 w-3" /> Large</Badge>
    </div>
  );
}

---

With Icons

Prefix the label with a small icon using Lucide React for contextual meaning.

import { Badge } from 'gnome-ui/badge';
import { CheckCircle2, AlertTriangle, Info, Zap } from 'lucide-react';

export function BadgeWithIcons() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge variant="success"><CheckCircle2 className="h-2.5 w-2.5" /> Verified</Badge>
      <Badge variant="warning"><AlertTriangle className="h-2.5 w-2.5" /> Review</Badge>
      <Badge variant="primary"><Info className="h-2.5 w-2.5" /> New</Badge>
      <Badge variant="destructive"><Zap className="h-2.5 w-2.5" /> Urgent</Badge>
    </div>
  );
}

---

Props