Badge

1import { type VariantProps, cva } from "class-variance-authority";
2import { Slot as SlotPrimitive } from "radix-ui";
3import type * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7const badgeVariants = cva(
8  "inline-flex items-center px-2 justify-center rounded w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
9  {
10    variants: {
11      variant: {
12        default: "font-normal",
13        bold: "uppercase font-bold",
14      },
15      size: {
16        sm: "text-sm h-4",
17        md: "text-md h-5",
18        lg: "text-md h-6",
19      },
20      colorScheme: {
21        neutral: "bg-neutral-bg text-neutral-fg",
22        primary: "bg-primary-bg text-primary-fg",
23        danger: "bg-danger-bg text-danger-fg",
24        success: "bg-success-bg text-success-fg",
25        warning: "bg-warning-bg text-warning-fg",
26        yellow:
27          "bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200",
28        teal: "bg-teal-100 text-teal-800 dark:bg-teal-800 dark:text-teal-200",
29        cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-800 dark:text-cyan-200",
30        blue: "bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-200",
31        pink: "bg-pink-100 text-pink-800 dark:bg-pink-800 dark:text-pink-200",
32      },
33    },
34    defaultVariants: {
35      colorScheme: "neutral",
36      size: "md",
37      variant: "default",
38    },
39  },
40);
41 
42function Badge({
43  className,
44  variant,
45  colorScheme,
46  size = "md",
47  asChild = false,
48  ...props
49}: React.ComponentProps<"span"> &
50  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
51  const Comp = asChild ? SlotPrimitive.Slot : "span";
52 
53  return (
54    <Comp
55      data-slot="badge"
56      className={cn(badgeVariants({ variant, colorScheme, size }), className)}
57      {...props}
58    />
59  );
60}
61 
62export { Badge, badgeVariants };