ui-shrushank
componentbadgesource: ok · refreshed
Badge
A small status pill with neutral, success, and warning tones.
npx shadcn add "https://raw.githubusercontent.com/Shrootiiii/ui/main/r/badge.json"free
Where it goes
stats
Interaction
animated-counter
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Files1 · source cached 10/8/2026, 4:48:23 AM
components/ui/Badge.tsx
type BadgeTone = "neutral" | "success" | "warning" | "live";
const tones: Record<BadgeTone, string> = {
neutral: "bg-stone-100 text-stone-700 dark:bg-stone-800 dark:text-stone-300",
success: "bg-green-100 text-green-700 dark:bg-green-500/15 dark:text-green-400",
warning: "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400",
live: "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400",
};
export function Badge({ tone = "neutral", children }: { tone?: BadgeTone; children: React.ReactNode }) {
return (
<span
className={`inline-flex items-center gap-1.5 h-6 rounded-full px-2.5 text-xs font-medium ${tones[tone]}`}
>
{tone === "live" && (
<span className="relative flex h-1.5 w-1.5">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-600 opacity-75 dark:bg-emerald-400 motion-reduce:hidden" />
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-600 dark:bg-emerald-400" />
</span>
)}
{children}
</span>
);
}