Badge

A small status indicator or label.

stable

Preview

SolidOutlineSubtleSuccessWarningDangerInfo

Code

tsx

import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="solid">Solid</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="subtle">Subtle</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="info">Info</Badge>
    </div>
  );
}

Props

Prop	Type	Default	Description
variant	`"solid" \| "outline" \| "subtle" \| "success" \| "warning" \| "danger" \| "info"`	"subtle"	Semantic tone. Use `success`/`warning`/`danger`/`info` for status meaning.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Renders a non-interactive `<span>`. If status meaning is critical, ensure surrounding context conveys it — color alone is not sufficient.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/badge.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
import type { HTMLAttributes } from "react";

const badgeVariants = cva(
  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors",
  {
    variants: {
      variant: {
        solid: "border-transparent bg-accent text-accent-fg",
        outline: "border-border bg-transparent text-fg",
        subtle: "border-transparent bg-bg-muted text-fg-muted",
        success: "border-transparent bg-[oklch(72.3%_0.219_149.58_/_0.15)] text-success",
        warning: "border-transparent bg-[oklch(76.9%_0.188_70.08_/_0.15)] text-warning",
        danger: "border-transparent bg-[oklch(63.7%_0.237_25.33_/_0.15)] text-danger",
        info: "border-transparent bg-[oklch(68.5%_0.169_237.32_/_0.15)] text-info",
      },
    },
    defaultVariants: { variant: "subtle" },
  },
);

export interface BadgeProps
  extends HTMLAttributes<HTMLSpanElement>,
    VariantProps<typeof badgeVariants> {}

export function Badge({ className, variant, ...props }: BadgeProps) {
  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
}

export { badgeVariants };

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmBadge (extends Label). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmBadge;

PrizmBadge()
PrizmBadge(String text)
PrizmBadge(String text, Variant variant)

Prop	Type	Default	Description
Variant	`enum { SOLID, OUTLINE, SUBTLE, SUCCESS, WARNING, DANGER, INFO }`	SUBTLE	Pill style. Status variants reuse the composited -color-<status>-subtle tints.
setVariant	`(Variant) → void`	—	Swap the variant.

Thin subclass of Label (carries text + optional graphic), styled as a rounded pill by the .prizm-badge rules. Mirrors components/ui/badge.tsx.