Badge

1import { cva, type VariantProps } from "class-variance-authority";
2import { forwardRef, type HTMLAttributes } from "react";
3import { cn } from "@/lib/utils";
4 
5const badgeVariants = cva(
6  "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-semibold backdrop-blur-md transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent [&>svg]:size-3 [&>svg]:shrink-0",
7  {
8    variants: {
9      variant: {
10        default:
11          "border-white/25 bg-[#007AFF] text-white shadow-sm hover:bg-[#0070ec]",
12        // Inverted default: blue text + blue ring on a transparent fill.
13        outline:
14          "border-[#007AFF]/55 bg-transparent text-[#007AFF] hover:bg-[#007AFF]/10 dark:border-[#409cff]/55 dark:text-[#409cff] dark:hover:bg-[#409cff]/10",
15        // Real frosted glass: visible white fill + top highlight so it reads as
16        // glass on light backgrounds instead of flat grey.
17        glass:
18          "border-black/[0.06] bg-white/45 text-current shadow-[inset_0_1px_0_0_rgba(255,255,255,0.7)] hover:bg-white/60 dark:border-white/15 dark:bg-white/[0.1] dark:text-current/90 dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.18)] dark:hover:bg-white/[0.16]",
19        destructive:
20          "border-white/25 bg-[#FF3B30] text-white shadow-sm hover:bg-[#ec352b]",
21      },
22    },
23    defaultVariants: {
24      variant: "default",
25    },
26  },
27);
28 
29export interface BadgeProps
30  extends HTMLAttributes<HTMLDivElement>,
31    VariantProps<typeof badgeVariants> {}
32 
33export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
34  ({ className, variant, ...props }, ref) => {
35    return (
36      <div
37        ref={ref}
38        className={cn(badgeVariants({ variant }), className)}
39        {...props}
40      />
41    );
42  },
43);
44Badge.displayName = "Badge";