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.