Badge

"use client";

import { Badge } from "@/registry/base/ui/badge";

export default function Badge01() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="outline">
        <span aria-hidden="true" className="size-1.5 rounded-full bg-emerald-500" />
        Active
      </Badge>
      <Badge variant="outline">
        <span aria-hidden="true" className="size-1.5 rounded-full bg-amber-500" />
        Pending
      </Badge>
      <Badge variant="outline">
        <span aria-hidden="true" className="size-1.5 rounded-full bg-red-500" />
        Failed
      </Badge>
    </div>
  );
}

"use client";

import { Bell, Inbox } from "lucide-react";

import { Badge } from "@/registry/base/ui/badge";

export default function Badge02() {
  return (
    <div className="flex flex-wrap gap-6">
      <div className="relative inline-flex size-9 items-center justify-center rounded-lg border border-border">
        <Bell aria-hidden="true" className="size-4" />
        <Badge className="absolute -top-2 -right-2 h-4 min-w-4 justify-center rounded-full px-1 text-[10px]">
          3
        </Badge>
      </div>
      <div className="relative inline-flex size-9 items-center justify-center rounded-lg border border-border">
        <Inbox aria-hidden="true" className="size-4" />
        <Badge
          variant="destructive"
          className="absolute -top-2 -right-2 h-4 min-w-4 justify-center rounded-full px-1 text-[10px]"
        >
          12
        </Badge>
      </div>
    </div>
  );
}

"use client";

import { Check, Clock, X } from "lucide-react";

import { Badge } from "@/registry/base/ui/badge";

export default function Badge03() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="outline">
        <Check aria-hidden="true" />
        Completed
      </Badge>
      <Badge variant="outline">
        <Clock aria-hidden="true" />
        In progress
      </Badge>
      <Badge variant="outline">
        <X aria-hidden="true" />
        Cancelled
      </Badge>
    </div>
  );
}

"use client";

import { Badge } from "@/registry/base/ui/badge";

export default function Badge04() {
  return (
    <div className="flex max-w-sm flex-wrap gap-2">
      <Badge variant="secondary">Design</Badge>
      <Badge variant="secondary">Engineering</Badge>
      <Badge variant="secondary">Marketing</Badge>
      <Badge variant="secondary">Sales</Badge>
      <Badge variant="secondary">Support</Badge>
      <Badge variant="secondary">Finance</Badge>
    </div>
  );
}