# Badge

Six badge variants — default, secondary, destructive, outline, ghost, and link — with optional leading or trailing icons, built on class-variance-authority and Radix Slot.

- Category: Buttons & Badges
- License: MIT
- Page: https://www.saasuji.com/components/badge
- Install: npx shadcn@latest add https://www.saasuji.com/r/badge.json

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"default" | "secondary" | "destructive" | "outline" | "ghost" | "link"` | `"default"` | Visual style of the badge. |
| asChild | `boolean` | `false` | Render the child element instead of a <span> (Radix Slot). |
| className | `string` | — | Additional classes merged onto the badge. |
| children | `React.ReactNode` | — | Text label, optionally with an icon. |

## Source

```tsx
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 h-5 items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 [&>svg]:size-2.5 [&>svg]:shrink-0 [[data-icon=inline-end]_&]:flex-row-reverse",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-white hover:bg-destructive/80 dark:bg-destructive/60",
        outline: "border-border bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
        ghost: "border-transparent bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
        link: "border-transparent bg-transparent text-primary underline-offset-4 hover:underline",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLSpanElement>,
    VariantProps<typeof badgeVariants> {
  asChild?: boolean
}

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

export { Badge, badgeVariants }

```