Installation
Usage
import BadgeCounter from "@/components/ruixen/badge-counter";
export default function MyCounter() {
return (
<div className="flex gap-4">
<BadgeCounter count={5} />
<BadgeCounter count={12} size="lg" variant="destructive" />
<BadgeCounter count={150} max={99} />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | - | The count number to display |
max | number | 99 | Maximum count before showing "+" |
size | "sm" | "md" | "lg" | "md" | Size of the counter badge |
variant | "default" | "secondary" | "destructive" | "success" | "default" | Color variant of the badge |
className | string | - | Additional CSS classes |