UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Badge

badgeui
Boilerplate repo

Small inline label for status, counts, or tags — sits beside other content, not as a standalone control. Seven variants: `default`, `secondary`, `destructive`, `outline`, `success`, `warning`, `info`.

Installation

$npx shadcn@latest add https://uipkge.dev/r/react/badge.json
Named registry:npx shadcn@latest add @uipkge-react/badgeInstalls to:components/ui/badge/

Examples

Loading interactive previews…

Props

NameType / ValuesDefaultRequired
variant
'default''secondary''destructive''outline''success''warning''info'
defaultoptional
wrap
'true'
—optional
asChild

Render the child element as the badge (e.g. an <a>) instead of a <span>.

booleanfalseoptional

Used by

Files installed (3)

  • components/ui/badge/Badge.tsx0.8 kB
    import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cn } from '@/lib/utils'
import { badgeVariants, type BadgeVariants } from './badge.variants'

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, BadgeVariants {
  /** Render the child element as the badge (e.g. an <a>) instead of a <span>. */
  asChild?: boolean
}

const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, variant, wrap, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'span'
    return (
      <Comp
        ref={ref}
        data-uipkge=""
        data-slot="badge"
        className={cn(badgeVariants({ variant, wrap }), className)}
        {...props}
      />
    )
  },
)
Badge.displayName = 'Badge'

export { Badge }
  • components/ui/badge/badge.variants.ts2.3 kB
  • components/ui/badge/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/react/badge.json