Badge3

1import { Badge } from "@/ui/badge";
2import { X } from "@mynaui/icons-react";
3 
4export default function WithClose() {
5  return (
6    <>
7      <Badge>
8        Badge
9        <button className="group -mr-0.5 ml-1 shrink-0 rounded-full">
10          <X className="size-3 stroke-current" />
11        </button>
12      </Badge>
13      <Badge variant="secondary">
14        Secondary
15        <button className="group -mr-0.5 ml-1 shrink-0 rounded-full">
16          <X className="size-3 stroke-current" />
17        </button>
18      </Badge>
19      <Badge variant="outline">
20        Outline
21        <button className="group -mr-0.5 ml-1 shrink-0 rounded-full">
22          <X className="size-3 stroke-current" />
23        </button>
24      </Badge>
25      <Badge variant="destructive">
26        Destructive
27        <button className="group -mr-0.5 ml-1 shrink-0 rounded-full">
28          <X className="size-3 stroke-current" />
29        </button>
30      </Badge>
31    </>
32  );
33}