Component

Badge

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

Preview

StableCommunityPreviewOpen Source

Usage

Badge example · tsx

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>
    </div>
  );
}

System metadata

Registry

badge

Category: ui

Status: stable

Since: 0.0.0

Files

badge.tsx

Tokens

primaryprimary-foregroundsecondarysecondary-foregroundaccentaccent-foregroundborderring

Dependencies

utilstokens

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. Prefer them for metadata and release signals rather than for primary calls to action.