badge.tsx (1129B)
1 import { cva, type VariantProps } from "class-variance-authority" 2 3 import { cn } from "@/lib/utils" 4 import { HTMLAttributes } from "react" 5 6 const badgeVariants = cva( 7 "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", 8 { 9 variants: { 10 variant: { 11 default: 12 "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", 13 secondary: 14 "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", 15 destructive: 16 "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", 17 outline: "text-foreground", 18 }, 19 }, 20 defaultVariants: { 21 variant: "default", 22 }, 23 } 24 ) 25 26 export interface BadgeProps 27 extends HTMLAttributes<HTMLDivElement>, 28 VariantProps<typeof badgeVariants> { } 29 30 function Badge({ className, variant, ...props }: BadgeProps) { 31 return ( 32 <div className={cn(badgeVariants({ variant }), className)} {...props} /> 33 ) 34 } 35 36 export { Badge, badgeVariants }