Badge

1import type { HTMLAttributes, ReactNode } from "react";2 3export type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger";4 5export type BadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {6  children: ReactNode;7  tone?: BadgeTone;8  variant?: "soft" | "solid" | "outline";9  size?: "sm" | "md";10  /** Adds a small presence marker; the label still carries the meaning. */11  dot?: boolean;12  icon?: ReactNode;13};14 15/**16 * A small token-colored label for status, counts, or metadata. The text is the17 * accessible meaning; the dot and icon are decorative and never the only cue.18 */19export function Badge({20  children,21  tone = "neutral",22  variant = "soft",23  size = "md",24  dot = false,25  icon,26  className = "",27  ...props28}: BadgeProps) {