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
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. |