Primitives

Badge

Compact status, label, or count chip.

DefaultSmallBeta15DeniedOutlineAllowedneutralredorangeyellowgreenbluepurplepinkLink badge

Composition

Status or label

<Badge />

Installation

First install and activate one skin. Core deliberately contains no visual token defaults.

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/badge.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/badge.json

See registry manifest

Dependencies

Theme tokenssrc/registry/sources/control-ui/theme.cssSupport

Raw code

Primary installed source

src/registry/sources/control-ui/ui/badge.tsx

"use client";

import { useRender } from "@base-ui/react/use-render";

import type { ComponentProps, CSSProperties } from "react";

import type { RenderProp } from "@/components/control-ui/control-props";

import type { BadgeKnobStyle } from "@/components/control-ui/knob-contracts/badge-knobs";

import { cn } from "@/components/control-ui/lib/cn";

export const badgeVariants = ["default", "outline"] as const;

export type BadgeVariant = (typeof badgeVariants)[number];

export const badgeSizes = ["sm", "md"] as const;

export type BadgeSize = (typeof badgeSizes)[number];

export const BADGE_COLORS = ["neutral", "red", "orange", "yellow", "green", "blue", "purple", "pink"] as const;

export type BadgeColor = (typeof BADGE_COLORS)[number];

export type BadgeProps = Omit<ComponentProps<"span">, "style"> & {

variant?: BadgeVariant;

size?: BadgeSize;

color?: BadgeColor;

render?: RenderProp<ComponentProps<"span">>;

style?: CSSProperties & BadgeKnobStyle;

};

export function Badge({ variant = "default", size = "md", color, render, className, children, ...props }: BadgeProps) {

const resolvedColor = color ?? "neutral";

return useRender({

defaultTagName: "span",

render,

props: {

...props,

"data-control-ui": "badge",

"data-control-family": "badge",

"data-slot": "root",

"data-variant": variant,

"data-size": size,

"data-color": resolvedColor,

className: cn(

        "inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap border font-medium [&>svg]:pointer-events-none [&>svg]:size-3",

className,

),

children,

},

});

}

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-badge-* · 5 knobsHow the cascade resolves

--cui-badge-radius<length-percentage>var(--radius-control)

--cui-badge-background<color>var(--_badge-color-background)

--cui-badge-foreground<color>var(--_badge-color-foreground)

--cui-badge-border-color<color>transparent

--cui-badge-font-size<length-percentage>var(--text-caption)