Badge

Small labels that highlight counts, status, or categories - CSS-only component with multiple style variants

Overview

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>

Getting Started

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>

Note: Badges are CSS-only components and require no JavaScript. Simply add the badge classes to your HTML elements. For dynamic updates (e.g., notification counts), use JavaScript to modify the badge text or visibility.

Web Components

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:

Direct Web Component Usage
Primary Secondary Success Danger Warning Info 
<domma-badge variant="primary">Primary</domma-badge>
<domma-badge variant="secondary">Secondary</domma-badge>
<domma-badge variant="success">Success</domma-badge>
<domma-badge variant="danger">Danger</domma-badge>
<domma-badge variant="warning">Warning</domma-badge>
<domma-badge variant="info">Info</domma-badge>
<domma-badge variant="primary">Primary</domma-badge>
<domma-badge variant="success">Success</domma-badge>
<domma-badge variant="danger">Danger</domma-badge>

Size Variants

Size Variants
Small Medium Large 
<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>
<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

Pill & Outline Styles
Pill Badge Outline Pill Outline 
<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>
<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:

Removable Badges
JavaScript CSS HTML TypeScript 
<domma-badge variant="primary" removable="">JavaScript</domma-badge>
<domma-badge variant="success" removable="">CSS</domma-badge>
<domma-badge variant="info" removable="" pill="">HTML</domma-badge>
<domma-badge variant="warning" removable="" pill="">TypeScript</domma-badge>
<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:

Programmatic API
Click button to change 
<domma-badge id="programmable-badge" variant="primary">Click button to change</domma-badge>
<button type="button" class="btn btn-sm btn-primary" data-action="1">Change Variant</button>
/**
 * Programmatic API - from public/showcase/elements/badge.
 */
export function mount(root) {
        // Web Components - Programmatic API demo
    const variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'];
    let currentIndex = 0;
    function changeVariant() {
          const badge = $(root).find('#programmable-badge')[0];
          currentIndex = (currentIndex + 1) % variants.length;
          const newVariant = variants[currentIndex];
          badge.setVariant(newVariant);
          badge.setText(`Changed to ${newVariant}!`);
        };

    // Handlers the old page had inline (onclick=…), wired here.
    $(root).find('[data-action="1"]').on('click', function (event) {
        changeVariant();
    });
}
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:

Wrapper API (Backwards Compatible)
Wrapper Badge 
<span id="wrapper-badge-1">Wrapper Badge</span>
/**
 * Wrapper API (Backwards Compatible) - from public/showcase/elements/badge.
 * E.badge() wraps the element in a <domma-badge> Web Component.
 */
export function mount(root) {
    E.badge(root.querySelector('#wrapper-badge-1'), {
        variant: 'info',
        size: 'large',
        pill: true
    });
}
// 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();

💡 Benefits of Web Components: Encapsulation - Styles and behaviour isolated via Shadow DOM Reusability - Use anywhere without framework dependencies Standards-based - Native browser API, future-proof Backwards Compatible - Existing code works without changes

Quick Start

Simple Badge

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

Tutorial

Build a notification indicator with dynamic badge count.

Tutorial

Notifications

3
  • New message received New
  • Task completed Done
  • Server alert Warning 
<div class="badge-card-width-center">
    <div class="card">
        <div class="card-body">
            <div class="flex items-center justify-between mb-3">
                <h3 class="m-0">Notifications</h3>
                <span id="notification-count" class="badge badge-danger">3</span>
            </div>
            <ul class="list-none p-0 m-0">
                <li class="p-3 border-b border-dm-border">
                    <div class="flex items-center justify-between">
                        <span>New message received</span>
                        <span class="badge badge-sm badge-primary">New</span>
                    </div>
                </li>
                <li class="p-3 border-b border-dm-border">
                    <div class="flex items-center justify-between">
                        <span>Task completed</span>
                        <span class="badge badge-sm badge-success">Done</span>
                    </div>
                </li>
                <li class="p-3">
                    <div class="flex items-center justify-between">
                        <span>Server alert</span>
                        <span class="badge badge-sm badge-warning">Warning</span>
                    </div>
                </li>
            </ul>
            <div class="mt-3 text-center">
                <button type="button" id="clear-notifications" class="btn btn-sm btn-outline">Clear All</button>
            </div>
        </div>
    </div>
</div>
/**
 * Tutorial - from public/showcase/elements/badge.
 */
export function mount(root) {
        // Tutorial
    $(root).find('#clear-notifications').on('click', () => {
          const badge = $(root).find('#notification-count')[0];
          badge.textContent = '0';
          badge.style.display = 'none';
        });
}
<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>

Examples

Colour Variants

Colour Variants
Default Primary Success Danger Warning Info 
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>

Sizes

Sizes
Small Default Large 
<span class="badge badge-sm badge-primary">Small</span>
<span class="badge badge-primary">Default</span>
<span class="badge badge-lg badge-primary">Large</span>

Pill Style

Pill Style
JavaScript CSS HTML TypeScript 
<span class="badge badge-pill badge-primary">JavaScript</span>
<span class="badge badge-pill badge-success">CSS</span>
<span class="badge badge-pill badge-info">HTML</span>
<span class="badge badge-pill badge-warning">TypeScript</span>

In Buttons

In Buttons
<button type="button" class="btn btn-primary">
    Messages <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-secondary">
    Notifications <span class="badge badge-danger">12</span>
</button>

Status Indicators

Status Indicators
  • API Server Online
  • Database Connected
  • Cache Server Degraded
  • Queue Worker Offline 
<div class="badge-card-width-center">
    <ul class="list-none p-0 m-0">
        <li class="p-3 border-b border-dm-border">
            <div class="flex items-center justify-between">
                <span>API Server</span>
                <span class="badge badge-success">Online</span>
            </div>
        </li>
        <li class="p-3 border-b border-dm-border">
            <div class="flex items-center justify-between">
                <span>Database</span>
                <span class="badge badge-success">Connected</span>
            </div>
        </li>
        <li class="p-3 border-b border-dm-border">
            <div class="flex items-center justify-between">
                <span>Cache Server</span>
                <span class="badge badge-warning">Degraded</span>
            </div>
        </li>
        <li class="p-3">
            <div class="flex items-center justify-between">
                <span>Queue Worker</span>
                <span class="badge badge-danger">Offline</span>
            </div>
        </li>
    </ul>
</div>

Category Tags

Category Tags

Advanced JavaScript Patterns

Learn advanced techniques for modern web development

JavaScript ES6+ Async/Await Promises Advanced 
<div class="card badge-card-width-center">
    <div class="card-body">
        <h3 class="card-title">Advanced JavaScript Patterns</h3>
        <p class="card-text mb-3">Learn advanced techniques for modern web development</p>
        <div class="flex gap-2 flex-wrap">
            <span class="badge badge-pill">JavaScript</span>
            <span class="badge badge-pill">ES6+</span>
            <span class="badge badge-pill">Async/Await</span>
            <span class="badge badge-pill">Promises</span>
            <span class="badge badge-pill">Advanced</span>
        </div>
    </div>
</div>

Best Practices

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

CSS Classes

Class Description
.badge Base badge class (required)
.badge-primary Primary colour variant
.badge-success Success/green variant
.badge-danger Danger/red variant
.badge-warning Warning/yellow variant
.badge-info Info/blue variant
.badge-light Light background variant
.badge-dark Dark background variant
.badge-sm Small size
.badge-lg Large size
.badge-pill Fully rounded corners

Config Engine

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

CSS Customisation

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

Variable Default Controls
--dm-primary var(--dm-blue-600) Primary badge colour
--dm-success var(--dm-green-600) Success badge colour
--dm-danger var(--dm-red-600) Danger badge colour
--dm-radius-full 9999px Badge shape (pill)

Example Override

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

Full CSS Customisation Cheat-Sheet →

Related Elements

Related Elements

Number Badge

Positioned notification counters with dot mode and pulse animation

Button Group

Combine badges with button groups for filters

Toast

Show notifications that update badge counts

 
<div class="grid grid-cols-1 gap-4 grid-auto-fit-250"><a href="/showcase/elements/number-badge" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Number Badge</h3>
            <p class="card-text">Positioned notification counters with dot mode and pulse animation</p>
        </div>
    </a>
    <a href="/showcase/elements/button-group" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Button Group</h3>
            <p class="card-text">Combine badges with button groups for filters</p>
        </div>
    </a>
    <a href="/showcase/elements/toast" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Toast</h3>
            <p class="card-text">Show notifications that update badge counts</p>
        </div>
    </a>
</div>