Badge Component Demo

Basic Variants

All badge color variants with their semantic meanings

// Default (gray) - neutral, original content
new Badge({ text: 'Original', variant: 'default' });

// Primary (blue) - primary actions, featured
new Badge({ text: 'Featured', variant: 'primary' });

// Success (green) - completed, active
new Badge({ text: 'Translated', variant: 'success' });

// Warning (yellow) - pending, caution
new Badge({ text: 'Pending', variant: 'warning' });

// Danger (red) - failed, error
new Badge({ text: 'Failed', variant: 'danger' });

// Info (cyan) - informational, draft
new Badge({ text: 'Draft', variant: 'info' });

Sizes

Three size options: small, medium (default), and large

new Badge({ text: 'Small', variant: 'primary', size: 'small' });
new Badge({ text: 'Medium', variant: 'primary', size: 'medium' });
new Badge({ text: 'Large', variant: 'primary', size: 'large' });

With Icons

Badges can include Dashicons for enhanced visual communication

new Badge({
    text: 'Completed',
    variant: 'success',
    icon: 'dashicons-yes-alt'
});

new Badge({
    text: 'In Progress',
    variant: 'warning',
    icon: 'dashicons-clock'
});

Pill Style

Fully rounded edges for a modern, tag-like appearance

new Badge({
    text: 'Active',
    variant: 'success',
    pill: true
});

Dot Indicator

Colored dot prefix for status indicators

new Badge({
    text: 'Online',
    variant: 'success',
    dot: true
});

// Combine dot with icon
new Badge({
    text: 'Processing',
    variant: 'warning',
    dot: true,
    icon: 'dashicons-clock'
});

Removable Badges

Badges with remove button (X) - click to remove

new Badge({
    text: 'Spanish',
    variant: 'primary',
    removable: true,
    onRemove: (badge) => {
        console.log('Badge removed');
        badge.destroy();
    }
});

With Tooltips

Hover over badges to see tooltips

new Badge({
    text: 'Translated',
    variant: 'success',
    tooltip: 'Translation completed on 2025-01-26'
});

Status Helper Method

Predefined configurations for translation statuses

Badge.fromStatus('translated');
Badge.fromStatus('pending');
Badge.fromStatus('failed');
Badge.fromStatus('needs_update');

// Override defaults
Badge.fromStatus('translated', { size: 'large', pill: true });

Combined Features

Mix and match features for complex use cases

// Tag-style badges
new Badge({
    text: 'Translation',
    variant: 'primary',
    pill: true,
    removable: true,
    onRemove: (badge) => badge.destroy()
});

// Status with all features
new Badge({
    text: 'Processing',
    variant: 'warning',
    size: 'large',
    dot: true,
    icon: 'dashicons-clock',
    tooltip: 'Translation in progress'
});

Common Use Cases