import type { HTMLAttributes } from "react";
import { cn } from "./utils";

export function Badge({ className, tone = "neutral", ...props }: HTMLAttributes<HTMLSpanElement> & { tone?: "neutral" | "info" | "warning" | "danger" | "success" }) {
  return <span className={cn("ui-badge", `ui-badge-${tone}`, className)} {...props} />;
}

