# Shadcn Badge

> Free shadcn/ui badge component for React — default, secondary, destructive and outline variants, with icon and status badge examples. Copy or install in one command.

Source: https://designrevision.com/components/badge

The **Shadcn Badge** is a small, theme-aware label for status, categories, counts, and tags — a drop-in <a href="https://ui.shadcn.com/docs/components/badge" rel="nofollow">shadcn/ui</a> badge built on `class-variance-authority` and styled entirely with CSS variables. It ships four variants and an `asChild` escape hatch for rendering as a link.

## When to use

Reach for a badge to **annotate** other content — a status pill beside a name, a count on a [button](/components/button), a category tag on a card. For interactive actions, use a button instead; a badge is a label, not a control.

## Variants

Four variants cover the common cases: `default` for emphasis, `secondary` for neutral labels, `destructive` for errors or warnings, and `outline` for a quiet, bordered style. Set them with the `variant` prop. Any SVG child is auto-sized to 12px and spaced from the text, so status badges with a leading icon need no extra classes.

## Theming

The badge reads your design tokens (`--primary`, `--secondary`, `--destructive`), so it follows your theme — including dark mode — with zero overrides.

## Installation

### badge

**Install:**

```bash
npx shadcn@latest add @designrevision/badge
```

**Dependencies:** @radix-ui/react-slot, class-variance-authority, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | 'default' \| 'secondary' \| 'destructive' \| 'outline' | default | Visual style of the badge. |
| asChild | boolean | false | Render as the child element via Radix Slot — e.g. to wrap a link. |

**Usage & accessibility:** Extends React.HTMLAttributes<HTMLSpanElement> — all native span attributes are supported.

```tsx
// components/ui/badge.tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-colors [&>svg]:pointer-events-none [&>svg]:size-3",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground",
        secondary: "border-transparent bg-secondary text-secondary-foreground",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground",
        outline: "text-foreground",
      },
    },
    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 : "span"
  return <Comp className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
```

## Examples

### Variants

The four built-in variants — default, secondary, destructive, and outline — plus status badges with a leading icon.

**Install:**

```bash
npx shadcn@latest add @designrevision/badge-variants-01
```

**Dependencies:** lucide-react, badge

```tsx
// components/ui/badge-variants-01.tsx
import { BadgeCheck, Clock } from "lucide-react"

import { Badge } from "@/components/ui/badge"

export default function BadgeVariants01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="secondary">
        <BadgeCheck />
        Verified
      </Badge>
      <Badge variant="outline">
        <Clock />
        Pending
      </Badge>
    </div>
  )
}
```