// src/components/Badge/Badge.tsx import type { ReactNode } from "react"; import { Icon } from "../Icon/Icon"; import styles from "./Badge.module.css"; export type BadgeProps = { children: ReactNode; /** Makes the chip itself a button (old Label type with hover/focus). */ onClick?: () => void; /** Adds a close affordance (old Label with Close / Two Button types). */ onRemove?: () => void; /** Announced label for the close button. */ removeLabel?: string; }; function CloseGlyph() { return ; } /** * Interactive chip. The three old types map onto prop combinations: * children only = static chip; onClick = clickable chip; onRemove = * chip with close; onClick + onRemove = the split "Two Button" pill * where chip and close are separate targets. */ export function Badge({ children, onClick, onRemove, removeLabel = "Remove" }: BadgeProps) { const split = Boolean(onClick && onRemove); if (split) { return ( ); } if (onRemove) { return ( {children} ); } if (onClick) { return ( ); } return {children}; }