e-tib.com/components/ui/Badge.tsx

import React from 'react';
import { cn } from './utils';

export function Badge({ children, className, variant = 'primary' }: { children: React.ReactNode, className?: string, variant?: 'primary' | 'accent' | 'neutral' | 'saturated' }) {
  const variants = {
    primary: 'bg-primary-light text-primary',
    accent: 'bg-accent-light text-accent-dark',
    neutral: 'bg-neutral-medium text-text-secondary',
    saturated: 'bg-saturated text-white',
  };
  
  return (
    <span className={cn('inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider select-none', variants[variant], className)}>
      {children}
    </span>
  );
}