Badge - Prisma — ContextQMD

import { Badge, badgeVariants } from "@prisma/eclipse";

Usage

Basic Badge

tsx

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

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

Live Example:

Color Variants

tsx

import { Badge } from "@prisma/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:

Status Indicators

Use badges to show status in lists or cards:

tsx

import { Badge } from "@prisma/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

tsx

import { Badge } from "@prisma/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:

Badge Sizes

tsx

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

export function BadgeSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge size="md" color="neutral" label="Medium (default)" />
      <Badge size="lg" color="neutral" label="Large" />
    </div>
  );
}

Live Example:

Badge Props

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

Color Variants

Neutral

Default badge style for general-purpose labels.

tsx

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

PPG (Prisma Pulse & Accelerate)

Use for Prisma Pulse and Accelerate related features or content.

tsx

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

ORM (Prisma ORM)

Use for Prisma ORM specific features or content.

tsx

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

Success

Indicates successful states, active status, or positive information.

tsx

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

Error

Indicates errors, deprecated features, or critical issues.

tsx

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

Warning

Indicates warnings, beta features, or items requiring attention.

tsx

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

Features

✅ Six semantic color variants
✅ Size variants via CVA (md, lg)
✅ 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

tsx

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

Feature Availability

tsx

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

Content Types

tsx

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

Version Status

tsx

<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