Skip to content
Nim UI

Badge

The Badge component renders small, inline labels for status indicators, categories, tags, and counts. It supports multiple visual variants and sizes to fit different contexts.

Import

import { Badge } from '@nim-ui/components';

Basic Usage

Default Badge

Badge
View Code 
<Badge>Badge</Badge>

Variants

Four variants are available to communicate different levels of emphasis and meaning.

Badge Variants

Default
Secondary
Outline
Destructive
View Code 
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>

Sizes

Three size options are available: small, medium (default), and large.

Badge Sizes

Small
Medium
Large
View Code 
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Props

Name Type Default Description
variant 'default' | 'secondary' | 'outline' | 'destructive' 'default' Visual style variant of the badge
size 'sm' | 'md' | 'lg' 'md' Size of the badge
className string - Additional CSS classes to apply
children * ReactNode - Badge content

Usage Examples

Status Indicators

function OrderStatus({ status }: { status: string }) {
  const variantMap: Record<string, 'default' | 'secondary' | 'destructive'> = {
    active: 'default',
    pending: 'secondary',
    cancelled: 'destructive',
  };


  return <Badge variant={variantMap[status]}>{status}</Badge>;
}

Tags List

function TagList({ tags }: { tags: string[] }) {
  return (
    <div className="flex flex-wrap gap-2">
      {tags.map((tag) => (
        <Badge key={tag} variant="outline" size="sm">
          {tag}
        </Badge>
      ))}
    </div>
  );
}

Notification Count

function NotificationBadge({ count }: { count: number }) {
  return (
    <div className="relative inline-flex">
      <button>Notifications</button>
      {count > 0 && (
        <Badge variant="destructive" size="sm" className="absolute -top-2 -right-2">
          {count}
        </Badge>
      )}
    </div>
  );
}
  • Avatar - User profile image with fallback
  • DataCard - Metric display card
  • PriceTag - Price display with discounts