Badge

npx @glasskit-ui/cli add badge

npm install @glasskit-ui/react

// components/lib/utils.tsimport { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";export type { ClassValue };/** * Merge class names the shadcn way: clsx joins conditionals, tailwind-merge * de-dupes conflicting Tailwind utilities so a consumer's `className` override * wins (e.g. passing `px-2` beats the component's `px-6`). Lens components are * Tailwind utilities + `--gk-*` tokens, so this de-dupe matters. */export function cn(...inputs: ClassValue[]): string {  return twMerge(clsx(inputs));}/** * Accessible name from a free-form `label` prop: the label itself when it's a * plain string, otherwise undefined (a ReactNode can't become an aria-label). */export function stringLabel(label: unknown): string | undefined {  return typeof label === "string" ? label : undefined;}

// components/glasskit/badge.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <Badge> — a small count or status pill (notification counts, live state). * Pure display. Variants: * - `default` — subtle surface, the everyday pill. * - `accent` — the accent gradient for the one thing that needs to draw the eye. * - `outline` — transparent, just a hairline border. */export function Badge({  children,  variant,  emphasis,  className,}: {  children: ReactNode;  /** Visual style — accent for the one badge that matters, outline for a quiet chip. */  variant?: "default" | "accent" | "outline";  /** @deprecated Use `variant` instead. */  emphasis?: "default" | "accent";  className?: string;}) {  const v = variant ?? (emphasis === "accent" ? "accent" : "default");  return (    <span      className={cn(        "t-caption inline-flex min-w-[26px] items-center justify-center rounded-full px-[11px] py-[5px] font-bold leading-none [font-variant-numeric:tabular-nums]",        v === "accent"          ? "btn-primary"          : v === "outline"            ? "border border-border text-foreground"            : "surface text-muted-foreground",        className,      )}    >      {children}    </span>  );}