Badge

A small status or category label, in four variants.

Badge

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

export default function BadgeDemo() {
  return <Badge>Badge</Badge>
}

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/badge.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Badge imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

<Badge>Badge</Badge>

Examples

Variants

DefaultSecondaryOutlineDestructive

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

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

API Reference

Name	Type	Default	Description
variant	'default' \| 'secondary' \| 'outline' \| 'destructive'	'default'	Visual style of the badge.
...props	React.HTMLAttributes<HTMLSpanElement>	—	Every native span attribute.