A small round counter badge for an icon button, like the unread count on a notification bell, that hides itself at zero and caps at a configurable max such as "99+".
import { CountBadge } from "@/components/ui/count-badge";
const samples = [
{ color: "red", count: 3 },
{ color: "brand", count: 12 },
{ color: "gray", count: 7 },
{ color: "amber", count: 45 },
{ color: "green", count: 2 },
{ color: "blue", count: 9 },
{ color: "teal", count: 128 },
{ color: "purple", count: 5 },
{ color: "pink", count: 1 },
] as const;
export default function CountBadgeColors() {
return (
<div className="flex flex-wrap gap-6 p-6">
{samples.map(({ color, count }) => (
<div key={color} className="flex flex-col items-center gap-2">
<div className="relative flex size-9 items-center justify-center rounded-md bg-black/5 dark:bg-white/10">
<span className="size-4 rounded-full bg-label-secondary/40" />
<CountBadge count={count} color={color} />
</div>
<span className="text-xs capitalize text-label-secondary">
{color}
</span>
</div>
))}
</div>
);
}
