Badge with Icon

1import { ArrowLeftIcon, ArrowRightIcon, XIcon } from "lucide-react";
2import { Badge } from "@/registry/ui/badge";
3 
4const BadgeWithIconDemo = () => {
5  return (
6    <div className="flex flex-wrap items-center gap-3">
7      <Badge>
8        <ArrowLeftIcon className="h-4 w-4" />
9        Left
10      </Badge>
11      <Badge>
12        Right
13        <ArrowRightIcon className="h-4 w-4" />
14      </Badge>
15      <Badge variant="destructive">
16        Remove
17        <XIcon className="h-4 w-4" />
18      </Badge>
19    </div>
20  );
21};
22 
23export default BadgeWithIconDemo;