Badge

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

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

Specification

Labels the status or category of an item in a compact, color-toned pill.

Props (3)
Every prop this component accepts, its type, default, and how to use it.
PropTypeDefaultDescription
tone"pine" | "amber" | "rose" | "neutral""neutral"Sets the semantic color of the badge (e.g. pine for positive, rose for errors).
children*ReactNode—The badge label; keep it to one or two words.
classNamestring—Extra classes merged onto the badge element.

Tones

ActivePendingOverdueDraft
Full source
The complete component, read from src/components/ui/badge.tsx.
badge.tsx
import { type ReactNode } from "react";
import { cn } from "@/lib/utils";

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

interface BadgeProps {
  tone?: BadgeTone;
  className?: string;
  children: 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>
  );
}