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.5 overflow-hidden rounded-lg border px-2.5 py-1.5 text-[0.68rem] font-semibold leading-none tracking-[0.045em] whitespace-nowrap uppercase shadow-[inset_0_1px_0_color-mix(in_oklch,var(--background)_55%,transparent)] transition-[color,background-color,border-color,transform] duration-200 hover:-translate-y-px focus-visible:ring-2 focus-visible:ring-ring/45 focus-visible:ring-offset-2 focus-visible:ring-offset-background [&_svg]:size-3",
9  {
10    variants: {
11      variant: {
12        default: "border-foreground/10 bg-foreground text-background",
13        secondary: "border-primary/12 bg-primary/10 text-primary",
14        outline: "border-foreground/14 bg-background/60 text-foreground",
15        destructive: "border-transparent bg-destructive text-destructive-foreground",
16        success: "border-emerald-500/20 bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
17      },
18    },
19    defaultVariants: { variant: "default" },
20  },
21)
22 
23function Badge({
24  className,
25  variant,
26  asChild = false,
27  ...props
28}: React.ComponentProps<"span"> &
29  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
30  const Comp = asChild ? Slot : "span"
31  return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
32}
33 
34export { Badge, badgeVariants }