##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Badges

Badges are compact UI elements that highlight important information, status indicators, or counters. They enhance user interfaces by providing visual cues for notifications, labels, and important metadata. Badges help draw attention to specific elements, indicate status changes, and provide contextual information in a space-efficient manner across your application.

### 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.

Heading Badge Examples
Loading...
Heading Badge Examples
Loading...

### 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.

Button Badge Examples
Loading...
Button Badge Examples
Loading...

### 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.

Positioned Badge Examples
Loading...
Positioned Badge Examples
Loading...

### 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

Contextual Badge Examples
Loading...
Contextual Badge Examples
Loading...

### 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.

Pill Badge Examples
Loading...
Pill Badge Examples
Loading...

### 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.

Custom Styled Badge Examples
Loading...
Custom Styled Badge Examples
Loading...

### 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.

Interactive Badge Examples
Loading...
Interactive Badge Examples
Loading...

### 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.

Status & Workflow Badges
Loading...
Status & Workflow Badges
Loading...

### 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.

Notification & Counter Badges
Loading...
Notification & Counter Badges
Loading...

### 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.

E-commerce & Product Badges
Loading...
E-commerce & Product Badges
Loading...

### Developer Tips & Best Practices

#### Pro Tips for Badges

- Accessibility: Always include `aria-label` or `visually-hidden` text for screen readers
- Performance: Use CSS transforms for positioned badges to avoid layout recalculations
- UX: Limit badge text to 2-3 words maximum for optimal readability
- Color Usage: Maintain consistent color meanings across your application
- Sizing: Ensure badges scale appropriately across different screen sizes
- Animation: Use subtle transitions when badge content changes dynamically

#### Common Pitfalls to Avoid

- Don't use too many badges in a small space - it creates visual clutter
- Avoid badges with lengthy text that might wrap or overflow containers
- Don't rely solely on color to convey meaning - include icons or text when possible
- Never use badges for essential information that users must see to complete tasks
- Don't forget to handle very large numbers (1000+ should become "1K+")
- Avoid animated badges unless the animation serves a specific functional purpose

#### JavaScript Integration Example

Here's a reusable badge manager class for dynamic badges:

    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;
      }
    }

`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates