✨ Introducing NextLaunch — Premium templates designed to help you build stunning landing pages in minutes.

Badge

A versatile badge component with support for multiple variants, sizes, and custom styling.

Badge Variants

Default
Secondary
Destructive
Outline
Success
Warning
Info

Badge Sizes

Small
Default
Large

Badge with Icon

Verified
Completed

Installation

1. Dependencies

npm install clsx tailwind-merge class-variance-authority

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Badge Code

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

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-default",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
        success: "border-transparent bg-green-500 text-white hover:bg-green-500/80",
        warning: "border-transparent bg-yellow-500 text-white hover:bg-yellow-500/80",
        info: "border-transparent bg-blue-500 text-white hover:bg-blue-500/80",
      },
      size: {
        default: "px-2.5 py-0.5 text-xs",
        sm: "px-2 py-0.5 text-[10px]",
        lg: "px-3 py-1 text-sm",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

/**
 * Badge component that displays a small piece of information or status.
 * @param {string} className - Additional CSS classes to apply to the badge.
 * @param {"default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info"} variant - The variant of the badge.
 * @param {"default" | "sm" | "lg"} size - The size of the badge.
 * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML attributes to apply to the badge.
 * @returns {JSX.Element} The rendered badge component.
 * @example
 * <Badge variant="default" size="sm">Default</Badge>
 */
function Badge({ className, variant, size, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant, size, className }))} {...props} />
}

export { Badge, badgeVariants }

Copy Badge Code

Badge Props

NameTypeRequiredDefaultDescription
variant"default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "info"No"default"The visual style of the badge.
size"default" | "sm" | "lg"No"default"The size of the badge.
classNamestringNoundefinedAdditional class names for custom styling.
childrenReact.ReactNodeYesundefinedThe content to display inside the badge.