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

Copy Badge Code

Badge Props

Name	Type	Required	Default	Description
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.
className	string	No	undefined	Additional class names for custom styling.
children	React.ReactNode	Yes	undefined	The content to display inside the badge.