Badges

Heading Badges

Enhance headings with contextual badges to highlight important metadata, version numbers, or status indicators. Use the text-bg-* classes to apply different background colors that match your content's context and importance. Heading badges are particularly useful for document sections, feature announcements, or status indicators in dashboards and documentation.

Button Badges

Add badges to buttons to display counters, status indicators, or small notifications. Use the ms-2 utility class to create proper spacing between the button text and badge. Combine with different button variants for various visual styles. Button badges are ideal for notification counters, inbox messages, or any numeric indicators that need to be associated with an action.

Positioned Badges

Create notification-style badges using positioning utilities. Combine position-absolute, translate-middle, and placement classes to precisely position badges relative to their container elements. These badges are perfect for notification indicators, status dots, or counters that need to appear as overlays on other elements without affecting the layout flow.

Contextual Badges

Use contextual background colors to convey different states and meanings. Combine badges with icons for enhanced visual communication. The text-bg-* classes ensure proper contrast between text and background colors. Each color variant has a specific semantic meaning that helps users quickly understand the information being presented:

• Primary/Secondary: General information and system categories
• Success: Completed actions, verified status, or positive outcomes
• Danger: Critical issues, errors, or items requiring immediate attention
• Warning: Caution, pending actions, or items needing review
• Info: Helpful information, tips, or neutral status indicators

Pill Badges

Create softer, pill-shaped badges using the rounded-pill class. These badges are perfect for tags, status indicators, or counters that need a more modern look. Combine with icons and counters for enhanced functionality. Pill badges work particularly well for tags, filters, or status indicators where a softer appearance is desired.

Custom Styled Badges

Create custom badge styles by combining utility classes with the base badge component. Adjust size, opacity, borders, and other properties to create badges that perfectly match your design system. Custom badges can help establish visual hierarchy, indicate different levels of importance, or create specialized indicators for specific use cases.

Interactive Badge Components

Create dynamic badges that respond to user interactions and state changes. These examples demonstrate badges with hover effects, clickable actions, and real-time updates. Interactive badges enhance user engagement and provide immediate feedback for various interface states and user actions.

Status & Workflow Badges

Professional status indicators for project management, task tracking, and workflow systems. These badges communicate different states in business processes and help users quickly understand the current status of items, projects, or tasks within your application.

Notification & Counter Badges

Specialized badges for notifications, counters, and real-time updates. These examples show various approaches to displaying numeric data, social media style notifications, and real-time status indicators that keep users informed about important updates and activities.

E-commerce & Product Badges

Product-focused badges for e-commerce interfaces, pricing displays, and promotional content. These badges help highlight special offers, product features, pricing information, and promotional content that drives user engagement and conversion in commercial applications.

Developer Tips & Best Practices

class BadgeManager {
  constructor() {
    this.counters = new Map();
    this.observers = new Map();
  }

  // Update badge with number formatting
  updateCounter(badgeId, count, options = {}) {
    const badge = document.getElementById(badgeId);
    if (!badge) return;

    const formattedCount = this.formatCount(count, options.maxDisplay);
    badge.textContent = formattedCount;

    // Add/remove visibility based on count
    if (count > 0) {
      badge.classList.remove('d-none');
      badge.setAttribute('aria-label', `${count} ${options.label || 'items'}`);
    } else {
      badge.classList.add('d-none');
    }

    // Store for reference
    this.counters.set(badgeId, count);
  }

  // Format large numbers (1000+ becomes 1K+)
  formatCount(count, maxDisplay = 999) {
    if (count <= maxDisplay) return count.toString();

    if (count < 1000) return `${maxDisplay}+`;
    if (count < 1000000) return `${Math.floor(count / 1000)}K+`;
    return `${Math.floor(count / 1000000)}M+`;
  }

  // Animate badge changes
  animateChange(badgeId, newCount, options = {}) {
    const badge = document.getElementById(badgeId);
    if (!badge) return;

    // Add pulse animation
    badge.classList.add('animate-pulse');

    setTimeout(() => {
      this.updateCounter(badgeId, newCount, options);
      badge.classList.remove('animate-pulse');
    }, 150);
  }

  // Create positioned notification badge
  createNotificationBadge(parentElement, count, position = 'top-right') {
    const badge = document.createElement('span');
    badge.className = `position-absolute translate-middle badge rounded-pill bg-danger`;
    badge.textContent = this.formatCount(count);

    // Position classes
    const positions = {
      'top-right': 'top-0 start-100',
      'top-left': 'top-0 start-0',
      'bottom-right': 'top-100 start-100',
      'bottom-left': 'top-100 start-0'
    };

    badge.className += ` ${positions[position] || positions['top-right']}`;

    // Ensure parent has position relative
    if (!parentElement.classList.contains('position-relative')) {
      parentElement.classList.add('position-relative');
    }

    parentElement.appendChild(badge);
    return badge;
  }
}