Components
Loading preview...
The Notification Button is a shadcn/ui-based component designed to display real-time alerts or counts for messages, tasks, or cart items. It combines a button with an icon (defaulting to a bell) and a dynamic badge that shows the count, making it highly visible and actionable. The component supports multiple sizes (sm, md, lg) and ensures that the badge scales proportionally with the icon and button, maintaining a clean, modern, and responsive design. Its flexibility allows developers to replace the icon or integrate it into dashboards, navbars, or overlays, making it a practical solution for interactive UIs that require user attention to notifications.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/notification-buttonimport NotificationButton from "@/components/ui/notification-button"
export default function DemoNotificationButton() {
return (
<div className="flex gap-4">
<NotificationButton count={5} />
<NotificationButton count={12} size="lg" />
<NotificationButton count={0} />
</div>
);
}