Badge

Enhance your UI with a customizable Badge component featuring multiple colors, sizes, and an optional dot indicator. Designed for Next.js and React projects, this badge is perfect for notifications, labels, and status indicators.

1. Quick setup

Create Badge.tsx file in /components/common folder:

jsx
import clsx from "clsx";
import React from "react";

type BadgeProps = {
  dot?: boolean;
  color?: keyof typeof colors;
  size?: keyof typeof sizes;
  className?: string;
  children?: React.ReactNode;
};

const colors = {
  gray: "bg-gray-100 text-gray-700",
  red: "bg-red-100 text-red-700",
  yellow: "bg-yellow-100 text-yellow-700",
  green: "bg-green-100 text-green-700",
  blue: "bg-blue-100 text-blue-700",
};

const dotColors = {
  gray: "fill-gray-400",
  red: "fill-red-400",
  yellow: "fill-yellow-400",
  green: "fill-green-400",
  blue: "fill-blue-400",
};

const sizes = {
  small: "px-1.5 py-0.5 text-xs font-medium",
  medium: "px-2 py-1 text-xs font-medium",
};

const Badge = ({
  dot = false,
  color = "red",
  className = "bg-gray-100",
  size = "medium",
  children,
}: BadgeProps) => {
  return (
    <span
      className={clsx(
        className,
        colors[color],
        sizes[size],
        "inline-flex items-center gap-x-1.5 rounded-full",
      )}
    >
      {dot && (
        <svg className={clsx(dotColors[color], "size-1.5")} viewBox="0 0 6 6" aria-hidden="true">
          <circle cx="3" cy="3" r="3" />
        </svg>
      )}
      {children}
    </span>
  );
};

export default Badge;

2. Usages

2.1 Sizes

jsx
<Badge color="red" size="small">Badge</Badge>
<Badge color="green">Badge</Badge>

2.2 Colors

jsx
<Badge color="gray">Badge</Badge>
<Badge color="red">Badge</Badge>
<Badge color="yellow">Badge</Badge>
<Badge color="green">Badge</Badge>
<Badge color="blue">Badge</Badge>

2.3 Badge with dot

jsx
<Badge color="gray" dot>Badge</Badge>
<Badge color="red" dot>Badge</Badge>
<Badge color="yellow" dot>Badge</Badge>
<Badge color="green" dot>Badge</Badge>
<Badge color="blue" dot>Badge</Badge>

2.4 Use case example

jsx
import { BellIcon } from "@heroicons/react/24/outline";

<div className="relative cursor-pointer">
  <BellIcon className="size-7" />
  <Badge
    color="red"
    size="small"
    className="absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 transform"
  >
    +9
  </Badge>
</div>