Components
Order/process status pill with soft tint + matching ring + readable foreground. Renders snake_case statuses with spaces. Use for order tables and detail headers — flat, no gradient, no glow.
Loading preview...
import StatusBadge from "@/components/ui/statusbadge";
export default function Demo() {
return (
<div className="flex flex-wrap items-center gap-2 p-6 bg-slate-50">
<StatusBadge status="pending_payment" />
<StatusBadge status="awaiting_details" />
<StatusBadge status="generating" />
<StatusBadge status="generated" />
<StatusBadge status="generated" delivered />
<StatusBadge status="failed" />
</div>
);
}