StatusBadge Variants

Purpose

statusBadgeVariants is the cva config that powers the <StatusBadge> chassis component. It exposes a status axis with five rungs (success / warning / error / info / neutral) that each pair a translucent background, matching border colour, and a foreground tint that meets WCAG AA against the surface background. The variants module is intentionally separate so an ejected source copy keeps the cva config in a dedicated file.

StatusBadge is a suaveplan-only addition — shadcn does not ship a status-badge registry item upstream (per Wave 3a's reconciliation finding #7).

Features

Single status axis with five rungs (success / warning / error / info / neutral).
Translucent backgrounds (bg-{colour}-500/10) with matching borders (border-{colour}-500/30) so the badge reads as a marker, not a button.
Dark-mode foreground compensation via dark:text-{colour}-300.
transition-colors + motion-reduce:transition-none so reduced-motion users see instant colour changes.
gap-1 baked in so the chassis-injected icon spaces correctly from the label.

Usage: Basic Example

import { statusBadgeVariants } from "@suaveplan/react-ui";

const success = statusBadgeVariants({ status: "success" });
const warning = statusBadgeVariants({ status: "warning" });
const error = statusBadgeVariants({ status: "error" });
const info = statusBadgeVariants({ status: "info" });
const neutral = statusBadgeVariants();

Usage: Advanced Example

import { cva } from "class-variance-authority";
import { statusBadgeVariants } from "@suaveplan/react-ui";

const blockquoteStatus = cva(
    [statusBadgeVariants({ status: "info" }), "italic"].join(" ")
);

API Reference