primitives/badge.tsx

React Badge component with variant styling using Radix and class-variance-authority.

// Source: https://github.com/reliverse/relivator | License: MIT | Copyright 2025 Nazar Kornienko (blefnk), Reliverse
// Provided via justclaw.it.com; keep this notice with the code.
import type * as React from "react";

import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "~/lib/cn";

const badgeVariants = cva(
  `
    inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden
    rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap
    transition-[color,box-shadow]
    focus-visible:border-ring focus-visible:ring-[3px]
    focus-visible:ring-ring/50
    aria-invalid:border-destructive aria-invalid:ring-destructive/20
    dark:aria-invalid:ring-destructive/40
    [&>svg]:pointer

... (truncated -- full source via MCP)