edr-platform/packages/ui-common/src/components/Badge/Badge.tsx

import { HTMLAttributes } from "react";
import clsx from "clsx";

export type BadgeTone = "neutral" | "success" | "warning" | "danger" | "info";

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  tone?: BadgeTone;
}

const toneClasses: Record<BadgeTone, string> = {
  neutral: "bg-gray-100 text-gray-700",
  success: "bg-green-100 text-green-700",
  warning: "bg-amber-100 text-amber-800",
  danger: "bg-red-100 text-red-700",
  info: "bg-sky-100 text-sky-700",
};

const Badge = ({
  tone = "neutral",
  className,
  children,
  ...rest
}: BadgeProps) => (
  <span
    className={clsx(
      "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
      toneClasses[tone],
      className,
    )}
    {...rest}
  >
    {children}
  </span>
);

export default Badge;