The Badge component is used to display small pieces of information like status indicators, counts, or labels.
Installation
npx shadcn@latest add @eo-n/badge
Install dependencies
npm install class-variance-authority
Copy component code
Copy and paste the following code into your project at components/ui/badge.tsx:import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:no-underline",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary:
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
);
function Badge({
className,
variant,
...props
}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
return (
<span
data-slot="badge"
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
);
}
export { Badge, badgeVariants };
Update imports
Update the import paths to match your project setup.
import { Badge } from "@/components/ui/badge";
Examples
Default
Secondary
<Badge variant="secondary">Secondary</Badge>
Outline
<Badge variant="outline">Outline</Badge>
Destructive
<Badge variant="destructive">Destructive</Badge>
With Icon
import { CheckCircle } from "lucide-react";
<Badge>
<CheckCircle />
Complete
</Badge>
As Link
<Badge asChild>
<a href="/docs">Documentation</a>
</Badge>
Component API
variant
'default' | 'secondary' | 'destructive' | 'outline'
The visual style variant of the badge.
default - Primary brand color backgroundsecondary - Secondary color backgrounddestructive - Red/error color backgroundoutline - Transparent background with border
Additional CSS classes to apply to the badge.
The content to display inside the badge.
...props
React.ComponentProps<'span'>
All standard HTML span element props are supported.
Styling
The Badge component uses class-variance-authority for variant styling. You can customize the variants by modifying the badgeVariants definition or extend it with additional variants. 