Docs
badge

badge

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

Features

  • Customizable: Supports multiple variants, sizes, and border styles.
  • Tooltip Integration: Displays tooltips for additional context.
  • Icon Support: Can be used with or without icons.
  • Border Options: Choose between different border styles.
  • Responsive: Adjusts size and appearance based on the configuration.

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, labels, or tags. It supports different variants, sizes, and optional tooltips.

Example Usage:

import { Badge } from '@/components/ui/badge'
 
const MyBadge = () => {
  return (
    <Badge variant="warning" size="lg" label={{ children: 'Warning badge' }}>
      Warning
    </Badge>
  )
}
import { Badge } from '@/components/ui/badge'
 
const MyBadge = () => {
  return (
    <Badge variant="warning" size="lg" label={{ children: 'Warning badge' }}>
      Warning
    </Badge>
  )
}

Variants

Default

Secondary

Destructive

Warning

Dashed

Outline

Icon

API Reference

General Badge Properties

  • size ('default' | 'sm' | 'lg' | 'icon', optional):

    • Defines the badge size.
    • 'default': Standard badge size.
    • 'sm': Smaller version.
    • 'lg': Larger version.
    • 'icon': Circular icon-only badge.

  • variant ('default' | 'secondary' | 'destructive' | 'warning' | 'dashed' | 'outline' | 'nothing', optional):

    • Defines the badge style.
    • 'default': Primary badge style.
    • 'secondary': Secondary badge.
    • 'destructive': Red destructive badge.
    • 'warning': Yellow warning badge.
    • 'dashed': Dashed border badge.
    • 'outline': Outlined badge.
    • 'nothing': Text-only badge.

  • border ('default' | 'primary' | 'secondary' | 'destructive' | 'warning', optional):

    • Defines the border style.
    • 'default': No border.
    • 'primary': Primary border.
    • 'secondary': Secondary border.
    • 'destructive': Destructive border.
    • 'warning': Warning border.

  • label (LabelType, optional):

    • Defines the tooltip label for the badge.

  • ...props (React.HTMLAttributes<HTMLDivElement>):

    • Additional properties passed to the badge.

Changelog

2025-02-14

The badgeVariants utility has been significantly expanded to provide more customization, improved accessibility, and flexibility.

🆕 What's New?

  • 🚀 New Variants Added

    • warning: A dedicated warning variant with proper foreground and background contrast.
    • dashed: A border-dashed variant for subtle emphasis.
    • nothing: A minimalist variant with no padding.

  • 🎨 New Border Styles

    • primary, secondary, destructive, and warning border options provide better differentiation and hover effects.

  • 🔍 Improved Size Options

    • sm, lg, and icon sizes ensure better adaptability across different UI elements.

🔄 Changes & Improvements

  • Refactored Structure

    • The new version removes unnecessary border-transparent definitions and improves hover effects.
    • More consistent text-foreground usage across variants.

  • Better Accessibility & Focus Styles

    • Ensures all variants retain focus indicators for better keyboard navigation.

🔥 Migration Notes

  • If you're using the old outline variant, it now has improved text contrast.
  • If you need bordered badges, use the new border options instead of relying on manual styles.
  • New warning and dashed variants provide better UX for emphasis.
AccordionButton