Badge

1import { Slot } from "@radix-ui/react-slot";
2import { cva, type VariantProps } from "class-variance-authority";
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7const badgeVariants = cva(
8  "inline-flex items-center rounded-full border border-border/100 dark:border-border/20 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 gap-2",
9  {
10    variants: {
11      variant: {
12        default:
13          "border-transparent bg-primary text-primary-foreground dark:shadow-sm dark:border-transparent",
14        brand:
15          "border-transparent bg-brand text-primary-foreground dark:shadow-sm dark:border-transparent",
16        "brand-secondary":
17          "border-transparent bg-brand-foreground/20 text-brand dark:border-transparent",
18        secondary:
19          "border-transparent bg-secondary text-secondary-foreground dark:shadow-sm dark:border-transparent",
20        destructive:
21          "border-transparent bg-destructive/30 text-destructive-foreground dark:shadow-sm dark:border-transparent",
22        outline: "text-foreground",
23      },
24      size: {
25        default: "px-2.5 py-1",
26        sm: "px-1",
27      },
28    },
29    defaultVariants: {
30      variant: "default",
31      size: "default",
32    },
33  },
34);
35 
36function Badge({
37  className,
38  variant,
39  size,
40  asChild = false,
41  ...props
42}: React.ComponentProps<"span"> &
43  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
44  const Comp = asChild ? Slot : "span";
45 
46  return (
47    <Comp
48      data-slot="badge"
49      className={cn(badgeVariants({ variant, size }), className)}
50      {...props}
51    />
52  );
53}
54 
55export { Badge, badgeVariants };