Status badge in seven tones with an optional dot. Every tone keeps 4.5:1 on its own tint in light and dark. Part of the Layro System: layro.vercel.app.
import * as React from "react";
import { Badge } from "@/components/ui/layro-badge";
/* Status labels in seven tones. Every tone clears 4.5:1 on its own tint,
in light and dark, with an optional dot for scanning a column. */
export default function BadgeDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 440 }}>
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Status badges</h2>
<div className="mb-5" />
<div className="flex flex-wrap gap-2">
<Badge>Draft</Badge>
<Badge tone="primary">Owner</Badge>
<Badge tone="outline">v2.4</Badge>
<Badge tone="info">Beta</Badge>
<Badge size="sm">12</Badge>
</div>
<div className="mt-4 grid gap-2 border-t border-border pt-4 text-[13px]">
{[["INV-2026-0914", "success", "Paid"], ["INV-2026-0927", "warning", "Pending"], ["INV-2026-0901", "destructive", "Failed"]].map(([n, t, l]) => (
<div key={n} className="flex items-center justify-between">
<span className="tabular-nums">{n}</span>
<Badge tone={t as "success"} dot>{l}</Badge>
</div>
))}
</div>
</div>
</div>
);
}
Part of Layro System — browse the full library on 21st.dev.