Badge
A small visual element used to highlight status, counts, or categories, often appearing near other UI elements to provide quick context.
This preview shows the default appearance of the Badge component.
Installation
To use the Badge component in your project, you need to install it. You have two options: using the CLI (Command Line Interface) for a quick setup, or following the Manual steps for more control and understanding.
The CLI command is the easiest way to add the Badge component. It automatically handles downloading the necessary code for you. Running this command in your project's terminal will add the badge component files.
npx shadcn@latest add badgeUsage
Once installed, import the Badge component and use it directly.
You can apply different visual styles using the variant prop.
<Badge variant="outline">Badge</Badge>Using as a Link
If you need a badge that also functions as a link, you can use the exported badgeVariants helper along with your routing library's Link component (e.g., Next.js <Link>). This applies the badge styling directly to the link element.
import Link from "next/link"; // Example: Using Next.js Link
import { badgeVariants } from "@/components/ui/badge"; // Import the variants helper<Link href="/your-link" className={badgeVariants({ variant: "secondary" })}>
Link Badge
</Link>Examples
Different variants provide distinct visual styles suitable for various contexts.
Default
The standard badge appearance.
Secondary
A less prominent style, often used for secondary information.
Outline
A badge with a border and transparent background.
Destructive
Used to indicate warnings, errors, or negative status.