ProPro components are coming soon. Stay tuned!

Badge Component

The Badge component is a small component used for labels, tags, and status indicators. It comes in multiple variants and sizes.

Basic Usage

import { Badge } from 'nebula-ui';
 
export default function Example() {
  return (
    <div className="flex gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
}

Variants

Badges come in several variants:

  • default: Primary badge (black/white)
  • secondary: Secondary badge
  • outline: Outlined badge
  • destructive: For errors or warnings (red)
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>

Sizes

Badges come in three sizes:

  • sm: Small badge
  • md: Medium badge (default)
  • lg: Large badge
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Props

PropTypeDefaultDescription
variant'default' | 'secondary' | 'outline' | 'destructive''default'Visual variant
size'sm' | 'md' | 'lg''md'Size of the badge
childrenReactNode-Badge content

Examples

Status Indicators

<Badge variant="default">Active</Badge>
<Badge variant="secondary">Pending</Badge>
<Badge variant="destructive">Error</Badge>

Tags

<div className="flex flex-wrap gap-2">
  <Badge>React</Badge>
  <Badge>TypeScript</Badge>
  <Badge>Next.js</Badge>
  <Badge>Tailwind</Badge>
</div>

With Icons

import { Badge } from 'nebula-ui';
import { Check } from 'lucide-react';
 
<Badge>
  <Check className="w-3 h-3 mr-1" />
  Verified
</Badge>

Notification Badge

<div className="relative inline-block">
  <Button>Notifications</Button>
  <Badge 
    variant="destructive" 
    size="sm"
    className="absolute -top-2 -right-2"
  >
    5
  </Badge>
</div>

Best Practices

  1. Use for labels and tags - badges are perfect for categorizing content
  2. Keep text short - badges work best with 1-2 words
  3. Use appropriate variants - match the badge style to its purpose
  4. Combine with other components - badges work well with buttons and cards
  5. Use consistent sizing - stick to one size within a context

Was this page helpful?

Let us know if this documentation helped you.