Badge

cardfrom shadcn/ui Essentials

Badge

AI Usage Rules

Use Badge to display status, counts, or labels. Default for primary info, secondary for neutral, destructive for errors/warnings, outline for subtle indicators.

Code Template

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"
import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] [&>svg]:pointer-events-none [&>svg]:size-3",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground",
        secondary: "bg-secondary text-secondary-foreground",
        destructive: "bg-destructive text-white",
        outline: "border-border text-foreground",
      },
    },
    defaultVariants: { variant: "default" },
  }
)

function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "span"
  return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }

Props Schema

Property	Type	Default	Description
variant	string	—
children	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "variant": {
      "enum": [
        "default",
        "secondary",
        "destructive",
        "outline"
      ],
      "type": "string"
    },
    "children": {
      "type": "string"
    }
  }
}