Badge Component - JSON API V2 Examples

Example 1: Color Variants

Badges support 8 color variants: primary, secondary, success, warning, danger, info, light, and dark.

const config = {
    version: 2,
    layoutId: "badge-colors",
    wrapper: { renderMode: "direct", class: "badge-demo-row" },
    items: [
        { content: { type: "badge", text: "Primary", color: "primary" } },
        { content: { type: "badge", text: "Secondary", color: "secondary" } },
        { content: { type: "badge", text: "Success", color: "success" } },
        { content: { type: "badge", text: "Warning", color: "warning" } },
        { content: { type: "badge", text: "Danger", color: "danger" } },
        { content: { type: "badge", text: "Info", color: "info" } },
        { content: { type: "badge", text: "Light", color: "light" } },
        { content: { type: "badge", text: "Dark", color: "dark" } }
    ]
};

RSL.JSONLayout.renderLayout('#demo1-output', config);

Example 2: Style Variants

Four style variants: solid (default), outline, subtle, and glass.

const config = {
    version: 2,
    layoutId: "badge-styles",
    wrapper: { renderMode: "direct", class: "badge-demo-row" },
    items: [
        { content: { type: "badge", text: "Solid", color: "primary" } },
        { content: { type: "badge", text: "Outline", color: "primary", style: "outline" } },
        { content: { type: "badge", text: "Subtle", color: "primary", style: "subtle" } },
        { content: { type: "badge", text: "Glass", color: "primary", style: "glass" } }
    ]
};

RSL.JSONLayout.renderLayout('#demo2-output', config);

Example 3: Sizes and Shapes

Five sizes (xs, sm, md, lg, xl) and four shapes (pill, rounded, square, circle).

const config = {
    version: 2,
    layoutId: "badge-sizes-shapes",
    wrapper: { renderMode: "direct", class: "badge-demo-row" },
    items: [
        // Sizes
        { content: { type: "badge", text: "XS", color: "success", size: "xs" } },
        { content: { type: "badge", text: "Small", color: "success", size: "sm" } },
        { content: { type: "badge", text: "Medium", color: "success" } },
        { content: { type: "badge", text: "Large", color: "success", size: "lg" } },
        { content: { type: "badge", text: "XL", color: "success", size: "xl" } },
        // Shapes
        { content: { type: "badge", text: "Rounded", color: "info", shape: "rounded" } },
        { content: { type: "badge", text: "Square", color: "info", shape: "square" } },
        { content: { type: "badge", text: "5", color: "danger", shape: "circle" } }
    ]
};

RSL.JSONLayout.renderLayout('#demo3-output', config);

Example 4: Badges with Icons

Add icons before or after text using FontAwesome classes.

const config = {
    version: 2,
    layoutId: "badge-icons",
    wrapper: { renderMode: "direct", class: "badge-demo-row" },
    items: [
        { content: { type: "badge", text: "Verified", color: "success", icon: "fas fa-check" } },
        { content: { type: "badge", text: "Warning", color: "warning", icon: "fas fa-exclamation-triangle" } },
        { content: { type: "badge", text: "New", color: "primary", iconAfter: "fas fa-arrow-right" } },
        { content: { type: "badge", text: "Star", color: "info", icon: "fas fa-star" } }
    ]
};

RSL.JSONLayout.renderLayout('#demo4-output', config);

Example 5: Status Badges

Status badges with animated dots - perfect for showing online/offline status.

const config = {
    version: 2,
    layoutId: "badge-status",
    wrapper: { renderMode: "direct", class: "badge-demo-row" },
    items: [
        { content: { type: "badge", text: "Online", color: "success", status: true } },
        { content: { type: "badge", text: "Away", color: "warning", status: true } },
        { content: { type: "badge", text: "Busy", color: "danger", status: true } },
        { content: { type: "badge", text: "Offline", color: "secondary", status: true } }
    ]
};

RSL.JSONLayout.renderLayout('#demo5-output', config);

Example 6: Counter Badges

Counter badges with automatic "99+" overflow. Includes interactive JavaScript API.

const config = {
    version: 2,
    layoutId: "badge-counter",
    wrapper: { renderMode: "direct", class: "badge-demo-row" },
    items: [
        { content: { type: "badge", counter: 5, color: "danger", id: "my-counter" } },
        { content: { type: "badge", counter: 23, color: "primary" } },
        { content: { type: "badge", counter: 99, color: "success" } },
        { content: { type: "badge", counter: 150, color: "warning", counterMax: 99 } }
    ]
};

RSL.JSONLayout.renderLayout('#demo6-output', config);

// Use the JavaScript API to manipulate counters:
RSL.Badge.incrementCounter(document.getElementById('my-counter'));
RSL.Badge.decrementCounter(document.getElementById('my-counter'));
RSL.Badge.setCounter(document.getElementById('my-counter'), 42);

Example 7: Animations and Gradients

Eye-catching badges with animations (pulse, bounce, shimmer, glow) and gradient backgrounds.

const config = {
    version: 2,
    layoutId: "badge-animated",
    wrapper: { renderMode: "direct", class: "badge-demo-row" },
    items: [
        // Animations
        { content: { type: "badge", text: "Live", color: "danger", animation: "pulse" } },
        { content: { type: "badge", text: "New!", color: "success", animation: "bounce" } },
        { content: { type: "badge", text: "Premium", color: "primary", animation: "shimmer" } },
        { content: { type: "badge", text: "Hot", color: "warning", animation: "glow" } },
        // Gradients
        { content: { type: "badge", text: "Purple", gradient: "purple" } },
        { content: { type: "badge", text: "Ocean", gradient: "ocean" } },
        { content: { type: "badge", text: "Sunset", gradient: "sunset" } },
        { content: { type: "badge", text: "Fire", gradient: "fire" } }
    ]
};

RSL.JSONLayout.renderLayout('#demo7-output', config);

Example 8: Dismissible Badges

Badges that can be dismissed by clicking the X button - perfect for tags and filters.

const config = {
    version: 2,
    layoutId: "badge-dismissible",
    wrapper: { renderMode: "direct", class: "badge-demo-row" },
    items: [
        { content: { type: "badge", text: "JavaScript", color: "secondary", style: "subtle", dismissible: true, icon: "fas fa-tag" } },
        { content: { type: "badge", text: "React", color: "secondary", style: "subtle", dismissible: true, icon: "fas fa-tag" } },
        { content: { type: "badge", text: "Node.js", color: "secondary", style: "subtle", dismissible: true, icon: "fas fa-tag" } },
        { content: { type: "badge", text: "TypeScript", color: "secondary", style: "subtle", dismissible: true, icon: "fas fa-tag" } }
    ]
};

RSL.JSONLayout.renderLayout('#demo8-output', config);

Example 9: Clickable Badges with Events

Interactive badges with click handlers for actions like filtering or navigation.

const config = {
    version: 2,
    layoutId: "badge-clickable",
    wrapper: { renderMode: "direct", class: "badge-demo-row" },
    items: [
        {
            content: {
                type: "badge",
                text: "Click Me",
                color: "primary",
                clickable: true,
                icon: "fas fa-hand-pointer",
                onClick: function(e, badge) {
                    alert('Badge clicked!');
                }
            }
        },
        {
            content: {
                type: "badge",
                text: "Filter: Active",
                color: "success",
                style: "outline",
                clickable: true,
                onClick: function(e, badge) {
                    badge.classList.toggle('rsl-badge-success');
                    badge.classList.toggle('rsl-badge-secondary');
                }
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo9-output', config);

Badge - JSON API V2 Examples