Badge5

1import { Badge } from "@/ui/badge";
2import { ArrowDown, ArrowLeft, ArrowUp } from "@mynaui/icons-react";
3 
4export default function Badge5() {
5  return (
6    <div className="flex flex-wrap items-center gap-3">
7      {/* Positive Change */}
8      <Badge className="bg-green-50 text-green-700 hover:bg-green-50 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-900">
9        <ArrowUp className="stroke-3" />
10        9.3%
11      </Badge>
12 
13      {/* Negative Change */}
14      <Badge className="bg-red-50 text-red-700 hover:bg-red-50 dark:bg-red-900 dark:text-red-300 dark:hover:bg-red-900">
15        <ArrowDown className="stroke-3" />
16        1.9%
17      </Badge>
18 
19      {/* Neutral Change */}
20      <Badge className="bg-muted text-muted-foreground hover:bg-muted">
21        <ArrowLeft className="stroke-3" />
22        0.6%
23      </Badge>
24 
25      {/* Large Positive */}
26      <Badge className="bg-blue-50 text-blue-700 hover:bg-blue-50 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-900">
27        <ArrowUp className="stroke-3" />
28        24.7%
29      </Badge>
30 
31      {/* Small Negative */}
32      <Badge className="bg-orange-50 text-orange-700 hover:bg-orange-50 dark:bg-orange-900 dark:text-orange-300 dark:hover:bg-orange-900">
33        <ArrowDown className="stroke-3" />
34        0.3%
35      </Badge>
36 
37      {/* Pill Style */}
38      <Badge className="bg-purple-50 text-purple-700 hover:bg-purple-50 dark:bg-purple-900 dark:text-purple-300 dark:hover:bg-purple-900 rounded-full">
39        <ArrowUp className="stroke-3" />
40        15.2%
41      </Badge>
42 
43      {/* Outlined Style */}
44      <Badge
45        variant="outline"
46        className="border-indigo-200 text-indigo-700 dark:border-indigo-700 dark:text-indigo-300"
47      >
48        <ArrowUp className="stroke-3" />
49        7.8%
50      </Badge>
51 
52      {/* Solid Background */}
53      <Badge className="bg-teal-600 text-white hover:bg-teal-600 dark:bg-teal-400 dark:text-black dark:hover:bg-teal-400">
54        <ArrowUp className="stroke-3" />
55        12.4%
56      </Badge>
57    </div>
58  );
59}