Tag

import { Tag } from "@/components/ui/tag";

export default function Example() {
  return <Tag />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const tagVariants = {
  default: "border bg-background text-foreground hover:bg-accent",
  primary: "bg-primary/10 text-primary border-primary/20",
  secondary: "bg-secondary text-secondary-foreground",
  success: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
  warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
  danger: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
};

const Tag = forwardRef(({ className, variant = "default", onRemove, children, ...props }, ref) => (
  <span ref={ref} className={cn("inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors", tagVariants[variant], className)} {...props}>
    {children}
    {onRemove && (
      <button onClick={onRemove} className="ml-0.5 rounded-full p-0.5 hover:bg-foreground/10">
        <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
      </button>
    )}
  </span>
));
Tag.displayName = "Tag";

export { Tag };