badge

A versatile badge component for labels, statuses, and more.

Badge

Features

  • Supports multiple styles, sizes, and borders with Tailwind theming
  • Built-in hover, focus, and ring states for accessibility
  • Icon-ready with circular icon mode and smart sizing
  • Lightweight, ref-forwarding, and easily composable
  • Powered by @gentleduck/variants for scalable, consistent design

Installation

npx duck-ui@latest add badge
npx duck-ui@latest add badge

Usage

import { Badge } from '@/components/ui/badge'
import { Badge } from '@/components/ui/badge'
<Badge variant="secondary">Badge</Badge>
<Badge variant="secondary">Badge</Badge>

Badge

Badge is a flexible and customizable React component used to display small status indicators with Tooltip, ..etc.

Example Usage:

import { Badge } from '@/components/ui/badge'
 
const MyBadge = () => {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Badge arial-label="Badge" variant={'outline'} size={'icon'} className="rounded-full">
          <Info />
        </Badge>
      </TooltipTrigger>
      <TooltipContent>Info Badge</TooltipContent>
    </Tooltip>
  )
}
import { Badge } from '@/components/ui/badge'
 
const MyBadge = () => {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Badge arial-label="Badge" variant={'outline'} size={'icon'} className="rounded-full">
          <Info />
        </Badge>
      </TooltipTrigger>
      <TooltipContent>Info Badge</TooltipContent>
    </Tooltip>
  )
}

Variants

Default

Badge

Secondary

Badge

Destructive

Badge

Warning

Badge

Dashed

Badge

Outline

Badge

Icon

API Reference

Badge Props

  • size ('default' | 'sm' | 'lg' | 'icon', optional):
  • variant ('default' | 'secondary' | 'destructive' | 'warning' | 'dashed' | 'outline' | 'nothing', optional):
  • border ('default' | 'primary' | 'secondary' | 'destructive' | 'warning', optional):
  • ...props (React.HTMLAttributes<HTMLDivElement>):
AvatarBreadcrumb