Badge

1import React from "react";
2import { Slot } from "@radix-ui/react-slot";
3import { cva, type VariantProps } from "class-variance-authority";
4import { cn } from "@/lib/utils";
5 
6const badgeVariants = cva(
7  "rounded-sm font-medium text-xs leading-none inline-flex items-center justify-center",
8  {
9    variants: {
10      variant: {
11        default:
12          "bg-neutral-700 text-neutral-100 dark:bg-neutral-200 dark:text-neutral-800",
13        secondary: "bg-secondary text-secondary-foreground",
14        outline: "border border-input bg-background",
15        destructive:
16          "bg-destructive dark:text-destructive-foreground text-primary-foreground",
17        red: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
18        blue:
19          "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
20        green:
21          "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
22        yellow:
23          "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
24        purple:
25          "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
26        pink:
27          "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400",
28        orange:
29          "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400",
30        cyan:
31          "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400",
32        indigo:
33          "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
34        violet:
35          "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400",
36        rose:
37          "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400",
38        amber:
39          "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
40        lime:
41          "bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-400",
42        emerald:
43          "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
44        sky: "bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-400",
45        slate:
46          "bg-slate-100 text-slate-700 dark:bg-slate-900/30 dark:text-slate-400",
47        fuchsia:
48          "bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-900/30 dark:text-fuchsia-400",
49      },
50      size: {
51        default: "px-1.5 py-1",
52        sm: "p-1",
53      },
54    },
55    defaultVariants: {
56      variant: "default",
57      size: "default",
58    },
59  },
60);
61 
62export interface BadgeProps
63  extends
64// … truncated