registry:component

Badge

v1.0.0ga

Small status label primitive with semantic variants.

Registry Endpoint

npx shadcn@latest add @aavya/ui-badge

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/ui-badge.json

Live Preview

DefaultSecondaryDestructiveOutlinePrimary Outline

Variants

variant

default · defaultsecondarydestructiveoutlineprimaryoutline

Props

Prop	Type	Default
asChild?	boolean	false

Badge forwards remaining props to all <span> element props.

Guidelines

Use badges for short status or metadata labels, a word or two at most.
Encode meaning with the variant (e.g. destructive for errors) consistently across the app.
Include a text label — don't rely on color alone to convey status.

Don’t

Don't use a Badge as a button — if it's clickable, use a Button or a real link.
Don't put long text or unbounded counts in a badge; it won't wrap gracefully.
Don't invent new colors per badge; stay within the defined variants.

Accessibility

Role

Non-interactive <span> by default (or a child element via asChild).

Keyboard

Not focusable or interactive on its own.

Screen reader

Read inline as text; the meaning must be in the words, not just the color.

Focus

No focus behaviour unless wrapped in an interactive element.

Gotcha

For a removable/clickable badge (e.g. a filter chip), wrap it in a real button with an accessible label — shape and color alone aren't a control.

Usage Snippet

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

export default function Example() {
  return (
    <div className="p-6">
      <Badge />
    </div>
  )
}

Source Preview

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(
  'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
        secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
        destructive:
          'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 border-transparent text-white',
        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
        primaryoutline: 'border-primary/25 bg-primary/10 text-primary [a&]:hover:bg-primary/30'
      }
    },
    defaultVariants: {
      variant: 'default'
    }
  }
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.