Badges

The Badges component provides a simple way to add small, customizable badges to your UI elements. Badges can be used to display counts, status indicators, or labels.

Usage

See the Example by Serhii Pimenov on CodePen.

Basic Usage

<!-- Basic usage -->
<span class="badge">New</span>

Additional Configurations

<!-- Badge in corner position -->
<div style="position: relative; width: 100px; height: 100px; background-color: #f0f0f0;">
    <span class="badge corner">8</span>
</div>

<!-- Badge outside corner position -->
<div style="position: relative; width: 100px; height: 100px; background-color: #f0f0f0;">
    <span class="badge corner-outside">12</span>
</div>

CSS Variables

Variable	Default (Light)	Dark Mode	Description
--badge-background	#F8F8F8	#2b2d30	Background color of the badge
--badge-color	#191919	#F8F8F8	Text color of the badge
--badge-border-radius	4px	4px	Border radius of the badge

Example of Custom Styling

/* Custom styling for badges */
.custom-badge {
    --badge-background: #2196F3;
    --badge-color: white;
    --badge-border-radius: 12px;
}

Available CSS Classes

Base Classes

• .badge - The main class for creating a badge

Modifiers

• .corner - Positions the badge in the top-right corner of a relative-positioned parent
• .corner-outside - Positions the badge outside the parent element in the top-right corner

Additional Information

The Badges component:

• Is purely CSS-based with no JavaScript functionality
• Automatically adapts to both light and dark themes
• Uses flexbox for proper text alignment and centering
• Has a default small font size (10px) and padding for compact display
• Can be positioned relative to parent elements using the corner classes