shadcn.io is not affiliated with official shadcn/ui
Shadcn Badge for React
A compact label for status, counts, and categories.
BadgeSecondaryDestructiveOutline
Installation
bunx --bun shadcn@latest add https://kit.dev/r/base/badge.jsonnpx shadcn@latest add https://kit.dev/r/base/badge.jsonpnpm dlx shadcn@latest add https://kit.dev/r/base/badge.jsonyarn shadcn@latest add https://kit.dev/r/base/badge.jsonInstall the following dependencies:
bun add @base-ui/react tailwind-variantsnpm install @base-ui/react tailwind-variantspnpm add @base-ui/react tailwind-variantsyarn add @base-ui/react tailwind-variantsAdd the following to your globals.css.
:root {
--destructive-foreground: var(--color-red-700);
--info: var(--color-blue-500);
--info-foreground: var(--color-blue-700);
--success: var(--color-emerald-500);
--success-foreground: var(--color-emerald-700);
--warning: var(--color-amber-500);
--warning-foreground: var(--color-amber-700);
}
.dark {
--destructive-foreground: var(--color-red-400);
--info: var(--color-blue-500);
--info-foreground: var(--color-blue-400);
--success: var(--color-emerald-500);
--success-foreground: var(--color-emerald-400);
--warning: var(--color-amber-500);
--warning-foreground: var(--color-amber-400);
}Copy and paste the following code into your project.
"use client";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
export const badgeVariants = tv({
base: "cn-badge group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none",
defaultVariants: {
variant: "default",
},
variants: {
variant: {
default: "cn-badge-variant-default",
destructive: "cn-badge-variant-destructive",
ghost: "cn-badge-variant-ghost",
link: "cn-badge-variant-link",Update the import paths to match your project setup.
Usage
import { Badge } from "@/components/ui/badge";<div className="flex w-full flex-wrap justify-center gap-2">
<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
</div>Demos
Variants
Use the variant prop to change the variant of the badge.
Icon
Render an icon inside the badge. Use data-icon="inline-start" or data-icon="inline-end" for placement.
Spinner
Render a spinner inside the badge. Add data-icon="inline-start" or data-icon="inline-end" on the spinner.
Link
Use asChild to render a link as a badge.
Colors
Customize badge colors with classes such as bg-green-50 dark:bg-green-800.
Rtl
Right-to-left badge. See the RTL configuration guide for document direction.
API Reference
Badge
PropType
className?string