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>

Add badges to your page in two simple steps

Step 1: Include Domma CSS

Add Domma CSS to your page:

<!-- CSS -->
<link rel="stylesheet" href="dist/domma.css">
<link rel="stylesheet" href="dist/elements.css">

Step 2: Add Badge HTML

Use <span> elements with badge classes:

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

<!-- Small size -->
<span class="badge badge-sm badge-primary">Small</span>

<!-- Pill style for tags -->
<span class="badge badge-pill badge-info">Tag</span>

Domma Badge is now available as a native Web Component! Use modern <domma-badge> tags or the traditional wrapper API - both work identically with zero breaking changes.

Direct Web Component Usage

Use custom HTML elements for clean, semantic markup:

<domma-badge variant="primary">Primary</domma-badge>
<domma-badge variant="success">Success</domma-badge>
<domma-badge variant="danger">Danger</domma-badge>

Size Variants

<domma-badge variant="primary" size="small">Small</domma-badge>
<domma-badge variant="primary" size="medium">Medium</domma-badge>
<domma-badge variant="primary" size="large">Large</domma-badge>

Pill & Outline Styles

<domma-badge variant="primary" pill>Pill Badge</domma-badge>
<domma-badge variant="success" outline>Outline</domma-badge>
<domma-badge variant="danger" pill outline>Pill Outline</domma-badge>

Removable Badges

Click the × to remove:

<domma-badge variant="primary" removable>JavaScript</domma-badge>
<domma-badge variant="success" removable>CSS</domma-badge>

<script>
// Listen for remove event
$('domma-badge').on('remove', (e) => {
    console.log('Badge removed!');
});
</script>

Programmatic API

Web Components support dynamic updates:

const badge = $('domma-badge')[0];

// Update variant
badge.setVariant('success');

// Update text
badge.setText('Updated!');

// Update size
badge.setSize('large');

// Chain methods
badge.setVariant('danger').setText('Error!').setSize('small');

Wrapper API (Backwards Compatible)

Existing code continues to work unchanged! The wrapper API uses Web Components internally:

// Traditional approach - still works!
const badge = Domma.elements.badge('#my-badge', {
    variant: 'success',
    size: 'large',
    pill: true,
    removable: true
});

// Same API as before
badge.setVariant('danger');
badge.setText('Updated!');
badge.destroy();

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 = $('.badge')[0];
let count = 3;

$('#clear-btn').on('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');
}

Override these CSS variables to customise Badge appearance and match your design system.

Example Override

:root {
    /* Square badges */
    --dm-radius-full: 0.25rem;
}

Full CSS Customisation Cheat-Sheet →