Core Component

Badge

Compact status indicators with five semantic color variants for conveying state at a glance.

Preview

OnlineRate limitedFailedGPT-4oDraft

Source

Full component implementation using the design system tokens.

tsx

const variantStyles = {
  success: "bg-green-500/10 text-green-500",
  warning: "bg-amber-500/10 text-amber-500",
  error: "bg-red-500/10 text-red-500",
  info: "bg-blue-500/10 text-blue-500",
  neutral: "bg-surface text-secondary",
};

export function DSBadge({
  variant = "neutral",
  children,
}: {
  variant?: "success" | "warning" | "error" | "info" | "neutral";
  children: React.ReactNode;
}) {
  return (
    <span
      className={`inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full ${variantStyles[variant]}`}
    >
      {children}
    </span>
  );
}

Props

All available props with types and defaults.

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Badge label
`variant`	`'success' \| 'warning' \| 'error' \| 'info' \| 'neutral'`	`'neutral'`	Semantic color variant

Variants

Success

Positive state — completion, online, active.

Online

tsx

<DSBadge variant="success">Online</DSBadge>

Warning

Attention needed — rate limits, approaching quotas.

Rate limited

tsx

<DSBadge variant="warning">Rate limited</DSBadge>

Error

Failure state — errors, disconnected, expired.

Failed

tsx

<DSBadge variant="error">Failed</DSBadge>

Info

Informational — version tags, feature flags.

GPT-4o

tsx

<DSBadge variant="info">GPT-4o</DSBadge>

Neutral

Default — labels, categories, metadata.

Draft

tsx

<DSBadge variant="neutral">Draft</DSBadge>

Prompt Guide

Prompt Guide — Badge

Use for

Model status indicators (online, offline, rate-limited)
Generation status (streaming, complete, failed)
Model name tags on responses
Feature flags and beta labels

Don't use for

Inline counts or numbers — use a counter component
Navigation indicators — use active states
Long text content — badges are for glanceable labels

AI Context

Badges are everywhere in AI interfaces. Model name tags on each response ('Claude 3.5', 'GPT-4o'), status indicators ('Streaming', 'Complete'), rate limit warnings, and feature flags ('Beta'). The semantic colors map directly to API states: success=200, warning=429, error=500.