Badge

Badges are small labels that highlight counts, status, or categories. They're perfect for notification counts, status indicators, labels, and tags. Domma's Badge is a CSS-only component with multiple style variants.

Key Features

• CSS-Only - No JavaScript required
• Colour Variants - Primary, success, danger, warning, info styles
• Size Options - Small, default, and large badges
• Pill Style - Fully rounded corners for tags

Basic Usage

<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>

Simple Badge

<span class="badge badge-primary">New</span>
<span class="badge badge-success">Active</span>
<span class="badge badge-danger">Urgent</span>

Build a notification indicator with dynamic badge count.

<div class="flex items-center justify-between">
    <h3>Notifications</h3>
    <span class="badge badge-danger">3</span>
</div>

<script>
const badge = document.querySelector('.badge');
let count = 3;

document.getElementById('clear-btn').addEventListener('click', () => {
    count = 0;
    badge.textContent = count;
    if (count === 0) {
        badge.style.display = 'none';
    }
});
</script>

Colour Variants

Sizes

Pill Style

In Buttons

Status Indicators

Category Tags

Accessibility

• Descriptive Text - Use clear, meaningful badge text
• Colour Independence - Don't rely solely on colour to convey meaning
• ARIA Labels - Add aria-label for icon-only or number badges

Design Guidelines

• Consistent Meaning - Use colour variants consistently (red for errors/urgent, green for success/active)
• Appropriate Size - Match badge size to surrounding content
• Limit Usage - Don't overuse badges; they lose impact when too common
• Pill vs Default - Use pills for tags/categories, default for counts/status

Common Use Cases

• Notification Counts - Unread messages, pending tasks
• Status Indicators - Online/offline, active/inactive
• Category Tags - Content classification, filtering
• Labels - New features, beta status, version numbers

Badges are CSS-only, but you can dynamically update them:

$.setup({
    '#notification-badge': {
        initial: {
            text: '0',
            css: { display: 'none' }
        },
        events: {
            // Update badge when notifications change
        }
    }
});

// Dynamic update
function updateBadge(count) {
    const $badge = $('#notification-badge');
    $badge.text(count);
    $badge.css('display', count > 0 ? 'inline-block' : 'none');
}