Create Next App

OPEN

Badge

Display badge with your chosen color and style. You can give it a pill or box container. Also size can be small, medium or large.

Preview


import React from 'react';
import Badge from "@/components/Badge";

const App = () => {
  return (
    <Badge
    label="label"
    size="lg"
    container="pill"
    className="text-red-800 bg-red-200"
    />
  );
};

Examples

Pill container and small size

label

Box container and Medium size

label

Pill container and Large size

label

Copy and paste the following code into your project.

import React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const badge = cva(
  `inline-flex items-center rounded-full border font-semibold`,
  {
    variants: {
      size: {
        sm: "py-1 px-2 text-xs",
        md: "py-1 px-3 text-sm",
        lg: "py-1 px-4 text-base",
      },
      container: {
        pill: "rounded-2xl",
        box: "rounded-md",
      },
    },
    defaultVariants: {
      size: "md",
      container: "pill",
    },
  }
);

const Badge = ({ label, size, container, className }: BadgeType) => {
  return (
    <div
      className={cn(
        `${badge({
          size,
          container,
        })}`,
        className
      )}
    >
      <div>{label}</div>
    </div>
  );
};

export default Badge;

interface BadgeType
  extends VariantProps<typeof badge>,
    React.HTMLAttributes<HTMLDivElement> {
  label: string;
}