Badge Component 🏷️

August 8, 2025 · View on GitHub

Modern, accessible badge component for displaying status indicators, labels, and notifications with multiple variants.

Features

  • 🎯 4 Variants - Default, Secondary, Destructive, Outline
  • 📏 Multiple Sizes - Small, Default, Large for different contexts
  • ♿ Accessibility First - ARIA compliant with semantic roles
  • 📱 Responsive Design - Consistent sizing across all screen sizes
  • 🎨 Customizable - Easy to style with Tailwind CSS classes
  • 🔧 TypeScript - Full type safety with CVA variants
  • 🎭 Animation Ready - Smooth transitions and hover effects

Installation

Initialize Angular SuperUI in your project:

ngsui-cli init

Add the Badge component:

ngsui-cli add badge

Usage

Basic Badge

import { Component } from '@angular/core';
import { Badge } from '@components/badge';

@Component({
  standalone: true,
  imports: [Badge],
  template: `
    <Badge variant="default">New</Badge>
  `
})
export class MyComponent {}

All Variants

@Component({
  template: `
    <div class="flex gap-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Error</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  `
})

With Numbers

@Component({
  template: `
    <div class="flex items-center gap-2">
      <span>Notifications</span>
      <Badge variant="destructive">99+</Badge>
    </div>
  `
})

Custom Styling

@Component({
  template: `
    <Badge 
      variant="outline" 
      className="border-green-500 text-green-700 dark:text-green-400"
    >
      Custom
    </Badge>
  `
})

API Reference

Badge

PropTypeDefaultDescription
variant'default' | 'secondary' | 'destructive' | 'outline''default'Visual style variant
classNamestringundefinedAdditional CSS classes
ariaLabelstringundefinedAccessible label for screen readers
ariaDescribedbystringundefinedID of element that describes the badge
role'status' | 'note' | 'img' | 'generic' | 'alert''note'ARIA role (auto-assigned based on variant)
ariaLive'off' | 'polite' | 'assertive''off'Live region announcement behavior
asLinkbooleanfalseRender badge as a clickable link
hrefstringundefinedURL when used as link (requires asLink=true)

🚀 Accessibility

WCAG 2.1 AA Compliant - The Badge component follows accessibility best practices:

♿ Screen Reader Support

  • Smart ARIA roles: Automatic role assignment based on variant and usage
    • destructive → role="alert" for urgent notifications
    • default/secondary → role="status" when dynamic, role="note" when static
    • outline → role="note" for informational content
  • Live regions: Optional ariaLive for dynamic content announcements
  • Descriptive labels: ariaLabel and ariaDescribedby support
  • Contextual meaning: Role adapts to content and variant semantics

⌨️ Keyboard Navigation

  • Link support: Optional asLink mode with full keyboard accessibility
  • Focus management: Proper focus indicators and outline for interactive badges
  • Tab order: Links are included in natural tab sequence
  • Non-interactive fallback: Static badges don't interfere with navigation

👁️ Visual Accessibility

  • High contrast: All variants meet WCAG AA contrast requirements
  • Color independence: Information is not conveyed through color alone
  • Consistent sizing: Readable text at all sizes
  • Focus indicators: N/A - badges are non-interactive

🔧 Implementation Notes

  • Automatic role assignment: Component intelligently assigns ARIA roles based on variant
  • Live regions: Use ariaLive="polite" for non-urgent updates, "assertive" for critical alerts
  • Link mode: Set [asLink]="true" and provide href for clickable badges
  • Contextual descriptions: Use ariaDescribedby to reference detailed explanations
  • Content guidelines: Keep badge text concise (1-3 words recommended)

Examples

Status Indicators

@Component({
  template: `
    <div class="space-y-2">
      <div class="flex items-center gap-2">
        <span>Build Status</span>
        <Badge variant="default">Passing</Badge>
      </div>
      
      <div class="flex items-center gap-2">
        <span>Deploy Status</span>
        <Badge variant="destructive">Failed</Badge>
      </div>
      
      <div class="flex items-center gap-2">
        <span>Feature Flag</span>
        <Badge variant="outline">Beta</Badge>
      </div>
    </div>
  `
})

Notification Counts

@Component({
  template: `
    <div class="flex items-center gap-4">
      <div class="flex items-center gap-2">
        <span>Messages</span>
        <Badge variant="default" [ariaLabel]="'12 unread messages'">12</Badge>
      </div>
      
      <div class="flex items-center gap-2">
        <span>Notifications</span>
        <Badge variant="destructive" [ariaLabel]="'99 or more notifications'">99+</Badge>
      </div>
    </div>
  `
})

Feature Labels

@Component({
  template: `
    <div class="space-y-2">
      <div class="flex items-center gap-2">
        <h3>Advanced Analytics</h3>
        <Badge variant="secondary">Pro</Badge>
      </div>
      
      <div class="flex items-center gap-2">
        <h3>AI Assistant</h3>
        <Badge variant="outline">Coming Soon</Badge>
      </div>
    </div>
  `
})

@Component({
  template: `
    <div class="space-y-2">
      <div class="flex items-center gap-2">
        <span>Documentation</span>
        <Badge 
          variant="outline" 
          [asLink]="true" 
          href="/docs"
          [ariaLabel]="'View documentation'"
        >
          View Docs
        </Badge>
      </div>
      
      <div class="flex items-center gap-2">
        <span>Support</span>
        <Badge 
          variant="secondary" 
          [asLink]="true" 
          href="/support"
          [ariaLabel]="'Get help and support'"
        >
          Help
        </Badge>
      </div>
    </div>
  `
})

Dynamic Content with Live Regions

@Component({
  template: `
    <div class="flex items-center gap-2">
      <span>Build Status</span>
      <Badge 
        variant="destructive"
        ariaLive="assertive"
        [ariaLabel]="'Build failed - requires immediate attention'"
      >
        Failed
      </Badge>
    </div>
    
    <div class="flex items-center gap-2">
      <span>Online Users</span>
      <Badge 
        variant="default"
        ariaLive="polite"
        [ariaLabel]="'Currently ' + userCount + ' users online'"
      >
        {{userCount}}
      </Badge>
    </div>
  `
})
export class StatusComponent {
  userCount = 42;
}

Advanced ARIA Usage

@Component({
  template: `
    <div class="space-y-3">
      <!-- Badge with description reference -->
      <div class="flex items-center gap-2">
        <span>Security Score</span>
        <Badge 
          variant="default"
          ariaDescribedby="security-help"
          [ariaLabel]="'Security score: 95 out of 100'"
        >
          95/100
        </Badge>
      </div>
      <p id="security-help" class="text-sm text-muted-foreground">
        Security score based on encryption, authentication, and monitoring practices.
      </p>
      
      <!-- Alert badge for errors -->
      <div class="flex items-center gap-2">
        <span>System Status</span>
        <Badge 
          variant="destructive"
          role="alert"
          [ariaLabel]="'Critical system error detected'"
        >
          Error
        </Badge>
      </div>
    </div>
  `
})

Styling

The Badge component uses Tailwind CSS classes and can be customized using the className prop:

// Custom colors
<Badge className="bg-purple-100 text-purple-800 border-purple-200">Purple</Badge>

// Larger size
<Badge className="px-3 py-1 text-sm">Large</Badge>

// With icon
<Badge className="flex items-center gap-1">
  <Icon name="star" class="w-3 h-3" />
  Featured
</Badge>

Best Practices

  1. Keep content concise - Badges should contain brief, scannable text
  2. Use semantic variants - Choose variants that match the content meaning
  3. Provide context - Use ariaLabel for numbers or abbreviated content
  4. Don't overuse - Too many badges can create visual clutter
  5. Consider interactive alternatives - For clickable badges, use buttons or links instead