Components
Loading preview...
A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built on Base UI's useRender hook.
npx shadcn@latest add https://21st.dev/r/coss.com/coss-badgeimport { Badge } from "@/components/ui/component";
export default function BadgeWithCount() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background">
<div className="flex flex-wrap gap-3 items-center justify-center">
<Badge variant="default">1</Badge>
<Badge variant="secondary">24</Badge>
<Badge variant="outline">99+</Badge>
<Badge variant="destructive">!</Badge>
</div>
</div>
);
}