Badge

1import { cva, type VariantProps } from 'class-variance-authority';
2import { cn } from '@/lib/classnames';
3import type { HTMLAttributes } from 'react';
4 
5const badgeVariants = cva(
6  'inline-flex items-center rounded-md border border-gray-200 px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 dark:border-gray-800 dark:focus:ring-gray-300',
7  {
8    variants: {
9      variant: {
10        default:
11          'border-transparent bg-gray-900 text-gray-50 shadow hover:bg-gray-900/80 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/80',
12        secondary:
13          'border-transparent bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80',
14        destructive:
15          'border-transparent bg-red-500 text-gray-50 shadow hover:bg-red-500/80 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/80',
16        outline: 'text-gray-950 dark:text-gray-50',
17      },
18    },
19    defaultVariants: {
20      variant: 'default',
21    },
22  },
23);
24 
25interface BadgeProps
26  extends HTMLAttributes<HTMLDivElement>,
27    VariantProps<typeof badgeVariants> {}
28 
29const Badge = ({ className, variant, ...props }: BadgeProps) => {
30  return (
31    <div className={cn(badgeVariants({ variant }), className)} {...props} />
32  );
33};
34 
35export { Badge };