Badge

A compact label for status, category, or counts.

stableBadge.tsx

Examples

Tones

stablenewbetapreviewlabsdeprecated

badge/tones.tsx

import { Badge } from "@streamui/react";

export default function BadgeTones() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Badge tone="lime">stable</Badge>
      <Badge tone="pink">new</Badge>
      <Badge tone="blue">beta</Badge>
      <Badge tone="violet">preview</Badge>
      <Badge tone="orange">labs</Badge>
      <Badge tone="paper">deprecated</Badge>
    </div>
  );
}

With icon or dot

newall systems normal

badge/with-icon.tsx

import { Sparkles } from "lucide-react";
import { Badge } from "@streamui/react";

export default function BadgeWithIcon() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Badge tone="pink">
        <Sparkles aria-hidden /> new
      </Badge>
      <Badge tone="paper">
        <span aria-hidden className="size-2 rounded-full bg-lime ring-2 ring-ink" />
        all systems normal
      </Badge>
    </div>
  );
}

Installation

$bun add @streamui/react

usage.tsx

import { Badge } from "@streamui/react";

<Badge tone="lime">stable</Badge>

API

Prop	Type	Default	Description
tone	`"lime" \| "pink" \| "blue" \| "violet" \| "orange" \| "paper"`	`"lime"`	Fill color.
className	`string`	`—`	Merged last.
...props	`ComponentProps<"span">`	`—`	Every native span attribute.

Accessibility

Color is never the only signal: the badge text carries the meaning.
Decorative icons and dots inside a badge should be aria-hidden.

Source

packages/react/src/Badge.tsx

import type { ComponentProps } from "react";
import { cn } from "./cn";

export type BadgeTone =
  | "lime"
  | "pink"
  | "blue"
  | "violet"
  | "orange"
  | "paper";

const tones: Record<BadgeTone, string> = {
  lime: "bg-lime text-on-bright",
  pink: "bg-pink text-on-bright",
  blue: "bg-blue text-on-bright",
  violet: "bg-violet text-on-bright",
  orange: "bg-orange text-on-bright",
  paper: "bg-paper-raised text-ink",
};

export type BadgeProps = ComponentProps<"span"> & { tone?: BadgeTone };

export function Badge({ tone = "lime", className, ...props }: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-full border-2 border-ink px-2.5 py-0.5 font-mono text-xs font-semibold tracking-wide uppercase [&_svg]:size-3.5",
        tones[tone],
        className,
      )}
      {...props}
    />
  );
}