Reactopia | Reusable React developer tools

Introduction

Small status or category label for React web apps. Styled with Tailwind; pair with the cn helper if you use it elsewhere.

Platform: React (web). Dependencies: react, Tailwind CSS.

Component

import type { HTMLAttributes } from "react";

type BadgeVariant = "default" | "success" | "warning" | "outline";

const variantClass: Record<BadgeVariant, string> = {
  default: "border-border/60 bg-muted text-foreground",
  success: "border-green-500/40 bg-green-500/15 text-green-200",
  warning: "border-amber-500/40 bg-amber-500/15 text-amber-200",
  outline: "border-border bg-transparent text-muted-foreground",
};

export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
  variant?: BadgeVariant;
};

export function Badge({
  variant = "default",
  className = "",
  children,
  ...props
}: BadgeProps) {
  return (
    <span
      className={[
        "inline-flex items-center rounded-full border px-2.5 py-0.5 text-[11px] font-medium",
        variantClass[variant],
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      {...props}
    >
      {children}
    </span>
  );
}

Swap .join(" ") for cn(...) if you already ship the cn utility from this library.

Example

<Badge variant="success">Live</Badge>
<Badge variant="outline">Beta</Badge>

Footer

For React Native, use a View + Text with your design tokens instead of Tailwind classes.