badge-custom-demo

1import { Badge } from "@/registry/pure-ui/ui/badge";
2
3export function BadgeCustomDemo() {
4  return (
5    <div className="flex flex-wrap items-center gap-2 md:flex-row">
6      <Badge
7        className="dark:bg-[#1c120d] bg-[#f1763a] border border-[#f1763a] dark:text-[#f1763a] text-[#1c120d]"
8        shape="bar"
9      >
10        L. Norris
11      </Badge>
12      <Badge
13        className="dark:bg-[#091917] bg-[#0ad4b4] border border-[#0ad4b4] dark:text-[#0ad4b4] text-[#091917]"
14        shape="bar"
15      >
16        G. Russel
17      </Badge>
18      <Badge
19        className="dark:bg-[#151515] bg-[#9c9ea1] border border-[#9c9ea1] dark:text-[#9c9ea1] text-[#151515]"
20        shape="bar"
21      >
22        O. Bearman
23      </Badge>
24      <Badge
25        className="dark:bg-[#0e1319] bg-[#4680d6] border border-[#4680d6] dark:text-[#4680d6] text-white"
26        shape="bar"
27      >
28        M. Verstappen
29      </Badge>
30      <Badge
31        className="dark:bg-[#0a111a] bg-[#1568da] border border-[#1568da] dark:text-[#1568da] text-white"
32        shape="bar"
33      >
34        C. Sainz
35      </Badge>
36      <Badge
37        className="dark:bg-[#09180a] bg-[#0cbf10] border border-[#0cbf10] dark:text-[#0cbf10] text-white"
38        shape="bar"
39      >
40        N. Hulkenberg
41      </Badge>
42      <Badge
43        className="dark:bg-[#1b0a0c] bg-[#eb1131] border border-[#eb1131] dark:text-[#eb1131] text-white"
44        shape="bar"
45      >
46        L. Stroll
47      </Badge>
48    </div>
49  );
50}