Documentation Index
Fetch the complete documentation index at: https://mintlify.com/aeonzz/eo-n/llms.txt
Use this file to discover all available pages before exploring further.
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.