Badge

A small label component for displaying status, counts, or categories.

Import

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

Basic Usage

<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="danger">Error</Badge>

Props

Prop Type Default Description
variant 'default' | 'primary' | 'success' | 'warning' | 'danger' 'default' Badge color variant
size 'xs' | 'sm' | 'md' 'xs' Badge size
className string - Additional CSS classes

Variants

Default (Gray)

<Badge variant="default">Draft</Badge>

Primary

<Badge variant="primary">New</Badge>

Success (Green)

<Badge variant="success">Active</Badge>
<Badge variant="success">Completed</Badge>
<Badge variant="success">Paid</Badge>

Warning (Yellow)

<Badge variant="warning">Pending</Badge>
<Badge variant="warning">Review</Badge>
<Badge variant="warning">Expiring</Badge>

Danger (Red)

<Badge variant="danger">Failed</Badge>
<Badge variant="danger">Overdue</Badge>
<Badge variant="danger">Canceled</Badge>

Sizes

<Badge size="xs">Extra Small</Badge>
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>

Common Use Cases

Status Badges

function StatusBadge({ status }: { status: string }) {
  const variants = {
    active: 'success',
    pending: 'warning',
    inactive: 'default',
    error: 'danger',
  };

  return (
    <Badge variant={variants[status]}>
      {status.charAt(0).toUpperCase() + status.slice(1)}
    </Badge>
  );
}

In Tables

import { Table, TableRow, TableCell, Badge } from '@/components/ui';

<TableRow>
  <TableCell>John Doe</TableCell>
  <TableCell>
    <Badge variant="success">Active</Badge>
  </TableCell>
</TableRow>

With Count

<Badge variant="primary">
  Notifications: 5
</Badge>

Dark Mode

Badges automatically adapt to dark mode with appropriate background and text colors:

Variant Light Mode Dark Mode
default Gray-100/Gray-800 Gray-800/Gray-200
primary Primary-100/Primary-800 Primary-900/Primary-200
success Green-100/Green-800 Green-900/Green-200
warning Yellow-100/Yellow-800 Yellow-900/Yellow-200
danger Red-100/Red-800 Red-900/Red-200