Primitives
Badge
Compact status, label, or count chip.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Root
Single-slot surface with no nested parts.
BadgeThe refined source installs this primitive from src/registry/sources/refined/ui/badge.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/badge.jsonInstalled dependencies
Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.
Theme tokens
src/registry/sources/refined/theme.cssSupportRaw code
Primary installed primitive source
Badge slot
src/registry/sources/refined/ui/badge.tsx
"use client";import { cva } from "class-variance-authority";import type { BadgeProps } from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { useAsChildRender } from "@/components/refined-ui/lib/use-as-child-render";import { skinSlot } from "@/components/refined-ui/skin";type BadgeVariant = NonNullable<BadgeProps["variant"]>;type BadgeColor = NonNullable<BadgeProps["color"]>;const defaultColorByVariant: Record<BadgeVariant, BadgeColor> = { default: "neutral", secondary: "neutral", destructive: "red", outline: "neutral",};const badgeVariant = cva( "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-meta font-medium transition-colors focus-visible:ring-2 focus-visible:ring-foreground/20 [&>svg]:pointer-events-none [&>svg]:size-3", { variants: { variant: { default: "", secondary: "", destructive: "", outline: "", }, }, defaultVariants: { variant: "default", }, },);export function Badge({ variant = "default", color, asChild = false, render, className, children, ...props }: BadgeProps) { const resolvedColor = color ?? defaultColorByVariant[variant]; return useAsChildRender({ defaultTagName: "span", asChild, render, children, props: { ...props, "data-ui": "agent", "data-slot": "badge", "data-variant": variant, "data-color": resolvedColor, className: cn(badgeVariant({ variant }), skinSlot("badge", { variant, color: resolvedColor }), className), }, });}