Badge Outline 5 - Circular Badge with Count, a shadcn block by @shadcnblocks · shadcn.exchange

Badge Outline 5 - Circular Badge with Count, a shadcn block by @shadcnblocks · shadcn.exchange

example/badge/badge-outline-5.tsx

import { Badge } from "@/components/ui/badge";

export const title = "Circular Badge with Count";

const Example = () => (
  <Badge
    className="flex size-6 items-center justify-center rounded-full p-0"
    variant="outline"
  >
    3
  </Badge>
);

export default Example;