Badge

Displays a badge or a component that looks like a badge.

BadgeSecondaryDestructiveOutline

Verified

20+

Installation

The Badge component is part of the Anya UI registry:


import { Badge } from "@/src/registry/anya/ui/badge";

Usage


<Badge variant="default | outline | secondary | destructive">Badge</Badge>

Examples

Default

Badge


<Badge>Badge</Badge>

Secondary


<Badge variant="secondary">Secondary</Badge>

Destructive


<Badge variant="destructive">Destructive</Badge>

Outline


<Badge variant="outline">Outline</Badge>

With Icon

VerifiedApprovedError


<Badge variant="secondary" className="bg-blue-500 text-white dark:bg-blue-600">
  <BadgeCheckIcon />
  Verified
</Badge>

Rounded Numbers

20+


<Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
  8
</Badge>

Link

You can use the asChild prop to make another component look like a badge. Here’s an example of a link that looks like a badge.

Badge


import Link from "next/link"
 
import { Badge } from "@/src/registry/anya/ui/badge"
 
export function LinkAsBadge() {
  return (
    <Badge asChild>
      <Link href="/">Badge</Link>
    </Badge>
  )
}

API Reference

Badge

The Badge component is a wrapper around the span element that adds consistent styling and badge variants.

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "secondary" \| "destructive"`	`"default"`	The visual style variant
`asChild`	`boolean`	`false`	When true, merges props with child component
`class`	`string`	-	Additional CSS classes
`...props`	`React.ComponentProps<"span">`	-	All standard span HTML attributes

Exports

Badge - The main Badge component
badgeVariants - The CVA function for custom styling