Badge

Compact status label in pine, amber, rose and neutral tones.

import { Badge }from "@/components/ui"

Tones

ActivePendingOverdueDraft

Full source

The complete component, read from src/components/ui/badge.tsx.

badge.tsx
import { cn } from "@/lib/utils";

type BadgeTone = "pine" | "amber" | "rose" | "neutral";

interface BadgeProps {
  tone?: BadgeTone;
  className?: string;
  children: React.ReactNode;
}

const TONE_CLASS: Record<BadgeTone, string> = {
  pine: "bg-accent-light text-accent",
  amber: "bg-warning-light text-warning",
  rose: "bg-error-light text-error",
  neutral: "bg-bg-secondary text-text-secondary",
};

export function Badge({ tone = "neutral", className, children }: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium",
        TONE_CLASS[tone],
        className
      )}
    >
      {children}
    </span>
  );
}