Badge with Image

1import Image from "next/image";
2import { Badge } from "@/registry/ui/badge";
3 
4const BadgeWithImageDemo = () => {
5  return (
6    <div className="flex flex-wrap items-center gap-3">
7      <Badge className="h-7 gap-1.5 rounded-full pl-0.75" variant="outline">
8        <Image
9          alt=""
10          className="aspect-square rounded-full"
11          height={20}
12          src="https://github.com/shadcn.png"
13          width={20}
14        />
15        shadcn
16      </Badge>
17      <Badge className="h-7 gap-1.5 rounded-full pr-0.75" variant="outline">
18        shadcn
19        <Image
20          alt=""
21          className="h-5 w-5 rounded-full"
22          height={20}
23          src="https://github.com/shadcn.png"
24          width={20}
25        />
26      </Badge>
27    </div>
28  );
29};
30 
31export default BadgeWithImageDemo;