Notification Button

Component notification-button-demo not found in registry.

Installation

Usage

import NotificationButton from "@/components/ruixen/notification-button";
import { Bell, Mail, MessageCircle } from "lucide-react";
import { useState } from "react";
 
export default function App() {
  const [notifications, setNotifications] = useState(5);
  const [messages, setMessages] = useState(12);
 
  return (
    <div className="flex gap-4">
      {/* Default bell icon with count */}
      <NotificationButton
        count={notifications}
        onClick={() => setNotifications(0)}
        size="md"
      />
 
      {/* Custom mail icon */}
      <NotificationButton
        count={messages}
        icon={<Mail className="w-5 h-5" />}
        onClick={() => setMessages(0)}
        size="lg"
      />
 
      {/* Chat messages */}
      <NotificationButton
        count={3}
        icon={<MessageCircle className="w-4 h-4" />}
        size="sm"
        className="bg-blue-500 hover:bg-blue-600"
      />
 
      {/* No notifications */}
      <NotificationButton count={0} size="md" />
    </div>
  );
}

Props

Prop	Type	Default	Description
`count`	`number`	-	Notification count
`icon`	`React.ReactNode`	Bell icon	Button icon
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button size
`className`	`string`	-	Additional CSS classes

Features

Badge Count: Shows notification count in top-right badge
Auto Hide: Badge hidden when count is 0 or undefined
Default Icon: Bell icon if no custom icon provided
Size Variants: Small, medium, and large sizes
Rounded Design: Circular button for clean appearance
Theme Support: Works with light and dark themes

Size Variants

The component provides three size options:

// Small (32px button, 16px badge)
<NotificationButton size="sm" count={5} />
 
// Medium (40px button, 20px badge) - Default
<NotificationButton size="md" count={12} />
 
// Large (48px button, 20px badge)
<NotificationButton size="lg" count={23} />

Icon Customization

import { Bell, Mail, MessageSquare, AlertTriangle } from "lucide-react";
 
// Email notifications
<NotificationButton
  count={8}
  icon={<Mail className="w-5 h-5" />}
/>
 
// Chat messages
<NotificationButton
  count={3}
  icon={<MessageSquare className="w-5 h-5" />}
/>
 
// Alerts
<NotificationButton
  count={1}
  icon={<AlertTriangle className="w-5 h-5" />}
/>

Badge Behavior

Visible: Shows when count > 0
Hidden: Hidden when count is 0, undefined, or not provided
Position: Top-right corner (-top-1 -right-1)
Content: Displays the exact count number
Styling: Primary color background with contrasting text

Size Configuration

Each size variant includes specific measurements:

const sizeConfig = {
  sm: {
    padding: "p-2",
    icon: "w-4 h-4",
    badge: "text-xs h-4 min-w-[1rem]",
  },
  md: {
    padding: "p-3",
    icon: "w-5 h-5",
    badge: "text-sm h-5 min-w-[1.25rem]",
  },
  lg: {
    padding: "p-4",
    icon: "w-6 h-6",
    badge: "text-sm h-5 min-w-[1.25rem]",
  },
};

Common Use Cases

Notification Center

const [unreadNotifications, setUnreadNotifications] = useState(15);
 
<NotificationButton
  count={unreadNotifications}
  onClick={() => openNotifications()}
/>;

Message Inbox

const [unreadMessages, setUnreadMessages] = useState(7);
 
<NotificationButton
  count={unreadMessages}
  icon={<Mail />}
  onClick={() => openMessages()}
/>;

Alert System

const [alerts, setAlerts] = useState(2);
 
<NotificationButton
  count={alerts}
  icon={<AlertTriangle />}
  onClick={() => viewAlerts()}
  className="bg-red-500 hover:bg-red-600"
/>;

Use Cases

Perfect for:

Notification Centers: Unread notification counts
Message Systems: New message indicators
Alert Systems: Warning or error counts
Activity Feeds: New activity indicators
Task Management: Pending task counts