Badge

A label component that displays text with a colored background to highlight status, categories, or metadata.

Usage

Basic Badge

import { Badge } from "@prisma-docs/eclipse";

export function StatusBadge() {
  return <Badge color="success" label="Active" />;
}

Live Example:

NeutralPPGORMSuccessErrorWarning

Color Variants

import { Badge } from "@prisma-docs/eclipse";

export function ColoredBadges() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge color="neutral" label="Neutral" />
      <Badge color="ppg" label="New Feature" />
      <Badge color="orm" label="Deprecated" />
      <Badge color="error" label="Error" />
      <Badge color="success" label="Active" />
      <Badge color="warning" label="Beta" />
    </div>
  );
}

Live Example:

DraftPulse FeatureORM OnlyDeprecatedStableExperimental

Status Indicators

Use badges to show status in lists or cards:

import { Badge } from "@prisma-docs/eclipse";

export function UserList() {
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <span>John Doe</span>
        <Badge color="success" label="Online" />
      </div>
      <div className="flex items-center justify-between">
        <span>Jane Smith</span>
        <Badge color="neutral" label="Away" />
      </div>
      <div className="flex items-center justify-between">
        <span>Bob Johnson</span>
        <Badge color="error" label="Offline" />
      </div>
    </div>
  );
}

Category Labels

import { Badge } from "@prisma-docs/eclipse";

export function ArticleCategories() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge color="ppg" label="Tutorial" />
      <Badge color="orm" label="Guide" />
      <Badge color="neutral" label="Reference" />
    </div>
  );
}

Live Example:

TutorialGuideReferenceBest Practice

Badge Props

color - The color variant: "neutral", "ppg", "orm", "error", "success", "warning" (required)
label - The text to display inside the badge (required)
className - Additional CSS classes (optional)

Color Variants

Neutral

Default badge style for general-purpose labels.

<Badge color="neutral" label="Neutral" />

PPG (Prisma Pulse & Accelerate)

Use for Prisma Pulse and Accelerate related features or content.

<Badge color="ppg" label="PPG Feature" />

ORM (Prisma ORM)

Use for Prisma ORM specific features or content.

<Badge color="orm" label="ORM Only" />

Success

Indicates successful states, active status, or positive information.

<Badge color="success" label="Active" />

Error

Indicates errors, deprecated features, or critical issues.

<Badge color="error" label="Deprecated" />

Warning

Indicates warnings, beta features, or items requiring attention.

<Badge color="warning" label="Beta" />

Features

✅ Six semantic color variants
✅ Eclipse design system color tokens
✅ Consistent typography and spacing
✅ Flexible sizing that adapts to content
✅ Works inline or in flex layouts
✅ Accessible color contrast ratios

Best Practices

Use neutral for general labels and categories
Use ppg for Prisma Pulse and Accelerate features
Use orm for Prisma ORM specific content
Use success for active, stable, or positive states
Use error for deprecated, broken, or critical items
Use warning for beta, experimental, or cautionary items
Keep badge labels short and descriptive (1-2 words)
Use consistent badge colors for the same meaning across your UI
Don't overuse badges - they should highlight important information
Place badges near the content they're labeling for clarity

Common Use Cases

API Status

<Badge color="success" label="Stable" />
<Badge color="warning" label="Beta" />
<Badge color="error" label="Deprecated" />

Feature Availability

<Badge color="ppg" label="Pulse" />
<Badge color="orm" label="ORM" />
<Badge color="neutral" label="All Products" />

Content Types

<Badge color="neutral" label="Guide" />
<Badge color="neutral" label="Tutorial" />
<Badge color="neutral" label="Reference" />

Version Status

<Badge color="success" label="Latest" />
<Badge color="warning" label="Preview" />
<Badge color="neutral" label="Legacy" />

Accessibility

Badge text has sufficient color contrast for readability
Badges are semantic elements that convey meaning through both color and text
Text labels ensure the meaning is clear even if color cannot be perceived
Badges use Eclipse design tokens for consistent, accessible styling

Badge

On this page