"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type NotificationBadgeVariant = "count" | "dot";

export interface NotificationBadgeProps {
  count?: number;
  maxCount?: number;
  variant?: NotificationBadgeVariant;
  pulse?: boolean;
  className?: string;
  children?: React.ReactNode;
}

export function NotificationBadge({
  count = 0,
  maxCount = 99,
  variant = "count",
  pulse = false,
  className,
  children,
}: NotificationBadgeProps) {
  const showBadge = variant === "dot" || count > 0;
  const displayCount = count > maxCount ? `${maxCount}+` : String(count);

  return (
    <span className={cn("relative inline-flex", className)}>
      {children}
      {showBadge ? (
        <span
          className={cn(
            "absolute flex items-center justify-center rounded-full border border-border bg-primary text-xs font-semibold text-foreground",
            variant === "dot"
              ? "-right-1 -top-1 h-3 w-3"
              : "-right-2 -top-2 h-5 min-w-5 px-1",
            pulse && "animate-pulse"
          )}
        >
          {variant === "count" ? displayCount : null}
        </span>
      ) : null}
    </span>
  );
}
Notification Badge

Dependencies

Files

Installation
