Component

Badge

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

Preview

StableCommunityPreviewOpen Source

Usage

Badge example · tsx

import { Badge } from '@nim-ui/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

Tokens

primaryprimary-foregroundsecondarysecondary-foregroundaccentaccent-foregroundborderring

Dependencies

utilstokens

Guidance

Badges should stay short and scannable. Prefer them for metadata and release signals rather than for primary calls to action.