Badge

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6const badgeVariants = cva(
7  "inline-flex items-center justify-center rounded-md border px-2.5 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-2 [&>svg]:pointer-events-none focus-visible:outline-ring/50 outline-0 outline-offset-0 outline-transparent transition-[outline-width,outline-offset,outline-color] duration-100 ease-out outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 aria-invalid:outline-destructive/50 aria-invalid:outline-2 aria-invalid:outline-offset-2 aria-invalid:outline-solid",
8  {
9    variants: {
10      variant: {
11        default:
12          "bg-primary border-transparent text-primary-foreground shadow-[0_1px_3px_0_oklch(0.22_0_0_/_0.12)]",
13        neutral: "bg-neutral border-transparent text-neutral-foreground",
14        outline: "text-foreground bg-background border",
15        secondary: "bg-secondary border-secondary/40 text-secondary-foreground",
16        success: "bg-success border-success-border text-success-foreground",
17        warning: "bg-warning border-warning-border text-warning-foreground",
18        info: "bg-info border-info-border text-info-foreground",
19        danger: "bg-danger border-danger-border text-danger-foreground",
20      },
21    },
22    defaultVariants: {
23      variant: "default",
24    },
25  },
26);
27 
28function Badge({
29  className,
30  variant,
31  ...props
32}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
33  return (
34    <span
35      data-slot="badge"
36      data-variant={variant}
37      className={cn(badgeVariants({ variant }), className)}
38      {...props}
39    />
40  );
41}
42 
43export { Badge, badgeVariants };