bigbullui logobigbullui
Componentfeedback0.65 KB gzipZero dependencies

Version Badge

Version badge set: new, beta, stable, deprecated tones.

Preview

Live Preview
YeniBetaStable

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add version-badge

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz
import { VersionBadge } from "@/components/ui/version-badge";

<VersionBadge />

Usage guidance

Use Version Badge when a ticket stub surface needs Version badge set: new, beta, stable, deprecated tones. Keep props minimal and prefer composition with sibling stubs.

Avoid Version Badge for long form flows or dense data grids where a dedicated layout block fits better.

Source code

version-badge.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export type FeatureStage = "new" | "beta" | "deprecated" | "stable";

export interface VersionBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  stage: FeatureStage;
  version?: string;
}

const STAGE: Record<FeatureStage, { label: string; tone: string }> = {
  new: { label: "Yeni", tone: "border-success/50 bg-success/10 text-success" },
  beta: { label: "Beta", tone: "border-warning/50 bg-warning/10 text-warning" },
  deprecated: { label: "Deprecated", tone: "border-destructive/50 bg-destructive/10 text-destructive" },
  stable: { label: "Stable", tone: "border-border bg-secondary text-secondary-foreground" },
};

/** Release version badge: new / beta / stable / deprecated tones. */
export function VersionBadge({ stage, version, className, ...props }: VersionBadgeProps) {
  const s = STAGE[stage];
  return (
    <span
      className={cn("inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 font-mono text-[9px] uppercase tracking-wider", s.tone, className)}
      {...props}
    >
      {stage === "new" && <span className="size-1 rounded-full bg-current animate-pulse motion-reduce:animate-none" aria-hidden="true" />}
      {s.label}
      {version && <span className="opacity-60">v{version}</span>}
    </span>
  );
}

Props

PropTypeDescription
stageFeatureStage
versionstring