Component

Badge

Badges provide compact labels for status, categorization, and lightweight emphasis.

Preview

StableCommunityPreviewOpen SourceAction needed

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add badge

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Badge } from '@nimjs/ui';

export function Example() {
  return (
    <div className="flex gap-2">
      <Badge>Stable</Badge>
      <Badge variant="secondary">Community</Badge>
      <Badge variant="outline">Docs</Badge>
      <Badge variant="destructive">Action needed</Badge>
    </div>
  );
}

System metadata

Registry

badge

Category: display

Status: preview

Version marker: 0.0.0 (unreleased)

Files

badge.tsx

Tokens

backgroundforegroundprimaryprimary-foregroundsecondarysecondary-foregroundaccentaccent-foregroundborderringdestructivedestructive-foreground

Dependencies

utilstokens

Copy-mode npm packages

class-variance-authorityclsxtailwind-merge

Accessibility

contrast awarescreen reader readable

Anatomy

root

Inline status element that owns tone, border, and compact spacing.

content

Short text label or compact inline metadata.

Usage patterns

status label

Use for short states such as stable, preview, beta, or deprecated.

metadata

Use for compact categorical labels that support scanning.

Guidance

Badges should stay short and scannable. Use destructive for urgent status and keep actions in buttons or links. A ref can target the underlying span.