Badge

A short status or count label. Renders a <span>; it has no role or behaviour, so the text itself must make sense when read aloud.

Installation

npx nuecrea-ui add badge

Usage

import { Badge } from '@/components/ui/badge';

const variants = ['default', 'secondary', 'outline', 'destructive'] as const;

export default function BadgeStory() {
  return (
    <main className="flex flex-wrap items-center gap-3">
      {variants.map((variant) => (
        <Badge key={variant} variant={variant}>
          {variant}
        </Badge>
      ))}
      <Badge variant="secondary">
        <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
          <circle cx="8" cy="8" r="4" />
        </svg>
        Online
      </Badge>
    </main>
  );
}

API reference

Badge

The badge element. Renders <span>.

PropTypeDefaultDescription
variant'default' | 'secondary' | 'outline' | 'destructive'"default"Visual style.