Badge

The Badge component displays status indicators, labels, or counts. Perfect for notifications, tags, and status indicators.

Installation

npm install @nqlib/nqui

Import

import { Badge } from '@nqlib/nqui';

Basic Usage

Copy this into your app. For all variants, see the first example below.

import { Badge } from '@nqlib/nqui';

export default function Example() {
  return <Badge>New</Badge>;
}

Variants

Badges come in different variants to suit various use cases:

Enhanced Variants

• default - Primary badge style with enhanced styling, gradients, and shadows
• destructive - For errors or warnings with destructive colors
• secondary - Secondary badge style with muted background
• success - For positive status indicators
• warning - For warning status indicators
• info - For informational status indicators

Fallback Variants

• outline - Outlined badge with border
• ghost - Minimal badge style with hover effects
• link - Link-style badge with underline

Examples

Each example has a Preview and Code tab. The code is copy-paste ready for your app (import from '@nqlib/nqui', same usage as above).

'use client';import { Badge } from '@nqlib/nqui';export default function Example() {  return (    <div className="flex flex-wrap gap-2">      <Badge variant="default">Default</Badge>      <Badge variant="secondary">Secondary</Badge>      <Badge variant="destructive">Destructive</Badge>      <Badge variant="success">Success</Badge>      <Badge variant="warning">Warning</Badge>      <Badge variant="info">Info</Badge>      <Badge variant="outline">Outline</Badge>      <Badge variant="ghost">Ghost</Badge>      <Badge variant="link">Link</Badge>    </div>  );}

'use client';import { Badge } from '@nqlib/nqui';import { Check, X, AlertCircle, Info, Star } from 'lucide-react';export default function Example() {  return (    <div className="flex flex-wrap gap-2">      <Badge>        <Check className="mr-1 h-2.5 w-2.5" />        Verified      </Badge>      <Badge variant="success">        <Check className="mr-1 h-2.5 w-2.5" />        Success      </Badge>      <Badge variant="destructive">        <X className="mr-1 h-2.5 w-2.5" />        Error      </Badge>      <Badge variant="warning">        <AlertCircle className="mr-1 h-2.5 w-2.5" />        Warning      </Badge>      <Badge variant="info">        <Info className="mr-1 h-2.5 w-2.5" />        Info      </Badge>      <Badge variant="outline">        <Star className="mr-1 h-2.5 w-2.5" />        Featured      </Badge>    </div>  );}

Props

The Badge component accepts all standard HTML span attributes plus:

Advanced Usage

Enhanced vs Core Badge

nqui exports an enhanced Badge component by default, which includes:

• Enhanced styling with gradients, shadows, and borders
• Smooth transitions and animations
• Better focus and active states
• 3D badge effects on enhanced variants

For the base shadcn Badge (without enhancements), you can import CoreBadge:

import { CoreBadge } from '@nqlib/nqui';

The enhanced variants (default, destructive, secondary, success, warning, info) use the enhanced styling, while outline, ghost, and link variants fall back to the core badge implementation.

Using badgeVariants

You can use the badgeVariants function directly for custom implementations:

import { badgeVariants } from '@nqlib/nqui';
import { cn } from '@nqlib/nqui';

export function CustomBadge({ className, ...props }) {
  return (
    <span
      className={cn(badgeVariants({ variant: 'default' }), className)}
      {...props}
    />
  );
}

With asChild

Use asChild to compose badges with other components:

import { Badge } from '@nqlib/nqui';
import Link from 'next/link';

export default function Example() {
  return (
    <Badge asChild variant="link">
      <Link href="/tags/react">React</Link>
    </Badge>
  );
}

Styling

Badges use the following design tokens:

• Height: h-5 (fixed height)
• Border radius: rounded-full
• Font size: text-[0.625rem] (10px)
• Font weight: font-medium
• Padding: px-2 py-0.5
• Icon support: Automatically adjusts padding when icons are present
• Enhanced variants use CSS custom properties for gradients and shadows

You can customize the appearance using Tailwind classes:

<Badge className="bg-custom-color text-custom-foreground">
  Custom Badge
</Badge>

Accessibility

• Semantic HTML (<span> by default)
• Focus-visible states with ring indicators
• ARIA invalid state support
• Screen reader friendly
• Keyboard navigation support when used as links

Best Practices

1. Use for status indicators: Badges are perfect for showing status, counts, or labels
2. Keep text short: Badges work best with 1-3 words or numbers
3. Choose appropriate variants: Match the variant to the context (destructive for errors, default for primary info)
4. Use icons sparingly: Icons can enhance understanding but keep badges compact
5. Consider contrast: Ensure badges have sufficient contrast against their background

Next Steps

• Learn about Button component for actions
• Explore Avatar for user avatars
• Check out other Data Display Components