Badge

Displays compact status or classification metadata beside other content.

Preview

Example code

Operational

Playground

Materialmaterial

Sets a filled or outlined treatment.

Schemescheme

Sets the badge color pair.

Usage

tsx

import { Badge } from "earthling-ui/badge";

export function Example() {
  return (
    <>
      <Badge scheme="good">Operational</Badge>
    </>
  );
}

Keep badge text brief and descriptive; badges should support nearby content rather than replace it.
Use paper for stronger status emphasis and outline for quieter metadata.
Badge is a span by default; use asChild when another inline semantic element is required.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

Import package

Own the source

bash

npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx

// Generated by dts-bundle-generator v9.5.1

import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';

export declare const badgeVariants: (props?: ({
	material?: "paper" | "outline" | null | undefined;
	scheme?: "default" | "primary" | "secondary" | "tertiary" | "neutral" | "muted" | "good" | "caution" | "bad" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface BadgeProps extends ComponentProps<"span">, VariantProps<typeof badgeVariants> {
	asChild?: boolean;
}
export declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

export {};

Runtime dependencies: @radix-ui/react-slot, class-variance-authority, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Badge implementation

tsx

"use client";

import { type ComponentProps, forwardRef } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/utils/cn";
import { schemes } from "@/utils/variants";
import { Slot } from "@radix-ui/react-slot";

const badgeVariants = cva(
  "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap",
  {
    variants: {
      material: {
        paper:
          "border-transparent bg-(--scheme-tint) text-(--scheme-foreground)",
        outline:
          "border border-(--scheme-tint)/50 text-foreground bg-transparent",
      },
      scheme: schemes,
    },
    defaultVariants: { material: "paper", scheme: "default" },
  },
);

export interface BadgeProps
  extends ComponentProps<"span">, VariantProps<typeof badgeVariants> {
  asChild?: boolean;
}

const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, material, scheme, asChild, ...props }, ref) => {
    const Comp = asChild ? Slot : "span";

    return (
      <Comp
        className={cn(badgeVariants({ material, scheme }), className)}
        ref={ref}
        {...props}
      />
    );
  },
);
Badge.displayName = "Badge";

export { Badge, badgeVariants };