Loading...
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
initialCount | number | 0 | Initial notification count |
type | "success" | "error" | "info" | "warning" | "info" | Badge type with color and icon |
label | string | "Notifications" | Label text for the button |
duration | number | 5000 | How long badge stays visible (ms) |
Features
- Animated Badge: Badge appears with animation when count increases
- Type Colors: Different colors for success, error, info, and warning types
- Auto Hide: Badge automatically disappears after specified duration
- Interactive Controls: Increment, decrement, and clear buttons
- Icon Support: Each type has an appropriate icon
- Count Display: Shows current notification count with "(count)" format
Usage
import NotificationBadge from "@/components/ui/notification-badge";
export default function Example() {
return (
<div className="space-y-6">
{/* Basic notification badge */}
<NotificationBadge />
{/* Success type with initial count */}
<NotificationBadge
initialCount={3}
type="success"
label="Messages"
duration={3000}
/>
{/* Warning type */}
<NotificationBadge type="warning" label="Alerts" />
{/* Error type */}
<NotificationBadge type="error" label="Errors" duration={8000} />
</div>
);
}