Badge

A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.

cossbycoss

import { Badge } from "@/components/ui/component";
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, XCircleIcon } from "lucide-react";

export default function BadgeWithIcon() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background">
      <div className="flex flex-wrap gap-3 items-center justify-center">
        <Badge variant="success"><CircleCheckIcon />Success</Badge>
        <Badge variant="error"><XCircleIcon />Error</Badge>
        <Badge variant="info"><InfoIcon />Info</Badge>
        <Badge variant="warning"><TriangleAlertIcon />Warning</Badge>
      </div>
    </div>
  );
}