Badge

1import { Slot } from "@radix-ui/react-slot";
2import { cva, type VariantProps } from "class-variance-authority";
3import type * as React from "react";
4
5import { cn } from "@/lib/utils";
6
7const badgeVariants = cva(
8  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium 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: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
13        success:
14          "border-transparent bg-success text-white [a&]:hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 dark:bg-success/60",
15        destructive:
16          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
17        warning:
18          "border-transparent bg-warning text-white [a&]:hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/60",
19        outline:
20          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
21        secondary:
22          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
23        glass:
24          "border-border/40 bg-background/60 backdrop-blur-sm text-foreground [a&]:hover:bg-accent/50",
25        link: "text-primary underline-offset-4 [a&]:hover:underline",
26        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
27      },
28      size: {
29        default: "px-2 py-0.5 text-xs",
30        sm: "px-1.5 py-0.5 text-xs",
31        lg: "px-3 py-1 text-md",
32      },
33    },
34    defaultVariants: {
35      variant: "default",
36      size: "default",
37    },
38  },
39);
40
41function Badge({
42  className,
43  variant,
44  size,
45  asChild = false,
46  ...props
47}: React.ComponentProps<"span"> &
48  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
49  const Comp = asChild ? Slot : "span";
50
51  return (
52    <Comp
53      data-slot="badge"
54      className={cn(badgeVariants({ variant, size }), className)}
55      {...props}
56    />
57  );
58}
59
60Badge.displayName = "Badge";
61
62export { Badge, badgeVariants };