Badge

Badges are used to inform the user of the status of specific data. Perfect for notifications, labels, and status indicators.

Basic Example

Badges with different colors and variants


const { default: Badge } = await import('/components/data-display/badge.js');

const { tags, $ } = Lightview;
const { div } = tags;

const badges = div({ class: 'space-y-4' },
    // Colors
    div({ class: 'flex flex-wrap gap-2' },
        Badge({}, 'Default'),
        Badge({ color: 'primary' }, 'Primary'),
        Badge({ color: 'secondary' }, 'Secondary'),
        Badge({ color: 'accent' }, 'Accent'),
        Badge({ color: 'info' }, 'Info'),
        Badge({ color: 'success' }, 'Success'),
        Badge({ color: 'warning' }, 'Warning'),
        Badge({ color: 'error' }, 'Error')
    ),
    // Variants
    div({ class: 'flex flex-wrap gap-2' },
        Badge({ variant: 'outline' }, 'Outline'),
        Badge({ variant: 'soft', color: 'primary' }, 'Soft'),
        Badge({ variant: 'dash', color: 'secondary' }, 'Dash')
    )
);

$('#demo').insert(badges);

Notification Counter

Reactive badge showing notification count


const { default: Badge } = await import('/components/data-display/badge.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div } = tags;

const count = signal(5);

const demo = div({ class: 'flex items-center gap-8' },
    Button({ 
        size: 'sm', 
        color: 'primary',
        onclick: () => { count.value++; }
    }, '+ Add Message'),
    
    Button({},
        'Inbox',
        Badge({ 
            color: 'secondary',
            class: 'ml-2'
        }, () => count.value > 99 ? '99+' : count.value)
    ),
    
    Button({ 
        size: 'sm',
        onclick: () => { count.value = 0; }
    }, 'Clear')
);

$('#demo').insert(demo);

Props

Prop Type Default Description
color string - 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error' | 'ghost' | 'neutral'
size string 'md' 'xs' | 'sm' | 'md' | 'lg'
variant string - 'outline' | 'soft' | 'dash'

Colors

Default Neutral Primary Secondary Accent Ghost Info Success Warning Error

Variants

Outline Soft Dash

Sizes

xs sm md lg

In Button

For more examples and options, see the DaisyUI Badge documentation.