Badge

import { Badge } from "@/components/ui/badge";

export default function BadgeDemo() {
  return <Badge>Badge</Badge>;
}

import { Badge } from "@/components/ui/badge";

export default function BadgeSecondary() {
  return <Badge variant="secondary">Secondary</Badge>;
}

import { Badge } from "@/components/ui/badge";

export default function BadgeOutline() {
  return <Badge variant="outline">Outline</Badge>;
}

import { Badge } from "@/components/ui/badge";

export default function BadgeGhost() {
  return <Badge variant="ghost">Ghost</Badge>;
}

import { Badge } from "@/components/ui/badge";

export default function BadgeDestructive() {
  return <Badge variant="destructive">Destructive</Badge>;
}

import { Badge } from "@/components/ui/badge";

export default function BadgeSuccess() {
  return <Badge variant="success">Success</Badge>;
}

import { Badge } from "@/components/ui/badge";

export default function BadgeInfo() {
  return <Badge variant="info">Info</Badge>;
}

import { Badge } from "@/components/ui/badge";

export default function BadgeWarning() {
  return <Badge variant="warning">Warning</Badge>;
}

import { Badge } from "@/components/ui/badge";
import { CircleUserRoundIcon } from "lucide-react";

export default function BadgeWithIcon() {
  return (
    <Badge>
      <CircleUserRoundIcon />
      Badge
    </Badge>
  );
}

import { Badge } from "@/components/ui/badge";

export default function BadgeWithLink() {
  return (
    <Badge render={<a href="/" />}>Link</Badge>
  );
}

import { Badge } from "@/components/ui/badge";
import { LoaderIcon } from "lucide-react";

export default function BadgeLoading() {
  return (
    <Badge>
      <LoaderIcon className="animate-spin" />
      Loading...
    </Badge>
  );
}

import { Badge } from "@/components/ui/badge";

export default function BadgeDisabled() {
  return <Badge aria-disabled="true">Badge</Badge>;
}