Badge

A small label for displaying status, counts, or categorization. Migrated to @opencosmos/ui.

Installation

# Install @opencosmos/ui to use Badge
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

variant— Visual variant of the badge

size— Size of the badge

dot— Show animated dot indicator

Usage

Import

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

Example

<Badge>
  Content
</Badge>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
variant	default \| secondary \| destructive \| outline \| success \| warning \| error \| info	"default"	Visual variant of the badge
size	sm \| md \| lg	"md"	Size of the badge
dot	boolean	false	Show animated dot indicator

Examples

Default

Secondary

Destructive

Outline

Success

On track

Warning

At risk

Error

Blocked

Info

In progress

Code Examples

Status Badges

Different status indicators using semantic color variants

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

<div className="flex gap-2">
  <Badge variant="success">Active</Badge>
  <Badge variant="warning">Pending</Badge>
  <Badge variant="error">Failed</Badge>
  <Badge variant="info">Info</Badge>
</div>

Notification Counts

Badge for displaying notification or message counts

<div className="flex items-center gap-2">
  <span>Inbox</span>
  <Badge variant="default" size="sm">99+</Badge>
</div>

<div className="flex items-center gap-2">
  <span>Notifications</span>
  <Badge variant="destructive" size="sm">3</Badge>
</div>

Live Indicator

Animated dot indicator for live or active states

<Badge variant="success" dot={true}>
  Live Stream
</Badge>

Category Tags

Using badges as category or technology tags

<div className="flex flex-wrap gap-2">
  {['React', 'TypeScript', 'TailwindCSS'].map((tag) => (
    <Badge key={tag} variant="secondary">
      {tag}
    </Badge>
  ))}
</div>