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 w-fit shrink-0 items-center justify-center gap-1 border font-medium transition-colors duration-[var(--poyraz-motion-duration-fast)] [&_svg]:size-3 [&_svg]:shrink-0",
8  {
9    variants: {
10      variant: {
11        default: "border-primary/20 bg-primary-muted text-primary-muted-foreground",
12        secondary: "border-border bg-secondary text-secondary-foreground",
13        outline: "border-border-strong bg-transparent text-foreground",
14        glass: "border-glass-border-outer bg-glass text-foreground shadow-xs backdrop-blur-soft",
15        info: "border-info-border bg-info text-info-foreground",
16        success: "border-success-border bg-success text-success-foreground",
17        warning: "border-warning-border bg-warning text-warning-foreground",
18        destructive: "border-destructive/25 bg-destructive-muted text-destructive-muted-foreground",
19      },
20      size: {
21        sm: "h-5 px-1.5 text-[10px]",
22        default: "h-6 px-2 text-xs",
23        lg: "h-7 px-2.5 text-xs",
24      },
25      radius: {
26        sm: "rounded-sm",
27        md: "rounded-md",
28        full: "rounded-full",
29      },
30    },
31    defaultVariants: { variant: "default", size: "default", radius: "full" },
32  },
33);
34 
35export interface BadgeProps
36  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
37 
38function Badge({ className, radius, size, variant, ...props }: BadgeProps) {
39  return (
40    <span
41      data-slot="badge"
42      data-variant={variant ?? "default"}
43      data-size={size ?? "default"}
44      data-radius={radius ?? "full"}
45      className={cn(badgeVariants({ variant, size, radius }), className)}
46      {...props}
47    />
48  );
49}
50 
51export { Badge, badgeVariants };