Badge

1import * as React from "react"
2import { Slot } from "@radix-ui/react-slot"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7const badgeVariants = cva(
8  "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border px-3 py-0.5 text-[11px] font-semibold uppercase tracking-wide shadow-[inset_0_1px_1px_rgba(255,255,255,0.9),0_1px_2px_rgba(20,60,130,0.2)] [text-shadow:0_1px_0_rgba(255,255,255,0.8)]",
9  {
10    variants: {
11      variant: {
12        default:
13          "border-[#93a7c2] bg-[linear-gradient(180deg,#f4f9fe_0%,#d9e8fa_48%,#c3dbf6_52%,#e2eefb_100%)] text-[#1c5fb8]",
14        secondary:
15          "border-[#aeb3bc] bg-[linear-gradient(180deg,#fdfdfe_0%,#e4e7ec_48%,#d3d7de_52%,#eceef2_100%)] text-[#3a3f47]",
16        destructive:
17          "border-[#d9958d] bg-[linear-gradient(180deg,#fef6f5_0%,#fadfdc_48%,#f5c9c4_52%,#fbe7e5_100%)] text-[#a81f1f] shadow-[inset_0_1px_1px_rgba(255,255,255,0.9),0_1px_2px_rgba(130,20,20,0.2)]",
18      },
19    },
20    defaultVariants: {
21      variant: "default",
22    },
23  }
24)
25 
26function Badge({
27  className,
28  variant,
29  asChild = false,
30  ...props
31}: React.ComponentProps<"span"> &
32  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
33  const Comp = asChild ? Slot : "span"
34 
35  return (
36    <Comp
37      data-slot="badge"
38      className={cn(badgeVariants({ variant, className }))}
39      {...props}
40    />
41  )
42}
43 
44export { Badge, badgeVariants }