Icon button

1import { Bell, MailIcon, MessageSquare } from "lucide-react";
2import { Button } from "@/components/ui/button";
3import { Badge } from "@/registry/ui/badge";
4 
5const BadgeDemo = () => {
6  return (
7    <div className="flex items-center gap-5">
8      <Button className="relative" size="icon" variant="outline">
9        <Bell />
10        <Badge className="absolute top-0 right-0 min-w-5.5 translate-x-1/2 -translate-y-1/2 px-1">
11          2
12        </Badge>
13      </Button>
14      <Button className="relative" size="icon" variant="outline">
15        <MailIcon />
16        <Badge
17          className="absolute top-0 right-0 min-w-5.5 translate-x-1/2 -translate-y-1/2 px-1"
18          variant="destructive"
19        >
20          @
21        </Badge>
22      </Button>
23      <Button className="relative rounded-full" size="icon" variant="outline">
24        <MessageSquare />
25        <Badge
26          className="absolute -top-2 -right-2 min-w-4.5 px-0.75 py-0.25"
27          variant="destructive"
28        >
29          @
30        </Badge>
31      </Button>
32    </div>
33  );
34};
35 
36export default BadgeDemo;