@duskmoon-dev/el-badge

A badge component for status indicators and counters built with Web Components.

Installation

bun add @duskmoon-dev/el-badge

Usage

Auto-Register

import '@duskmoon-dev/el-badge/register';

<el-dm-badge variant="success">Active</el-dm-badge>

Manual Registration

import { ElDmBadge, register } from '@duskmoon-dev/el-badge';

// Register with default tag name
register();

// Or register with custom tag name
customElements.define('my-badge', ElDmBadge);

Variants

| Variant | Description | |---------|-------------| | primary | Primary color (default) | | secondary | Secondary color | | success | Success/green | | warning | Warning/yellow | | error | Error/red | | info | Info/blue |

Sizes

| Size | Description | |------|-------------| | sm | Small badge | | md | Medium badge (default) | | lg | Large badge |

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | variant | string | 'primary' | Color variant | | color | string | - | Custom color | | size | string | 'md' | Size: sm, md, lg | | pill | boolean | false | Fully rounded pill shape | | dot | boolean | false | Display as dot indicator |

CSS Parts

| Part | Description | |------|-------------| | badge | The badge element |

Examples

Basic Variants

<el-dm-badge variant="primary">Primary</el-dm-badge>
<el-dm-badge variant="secondary">Secondary</el-dm-badge>
<el-dm-badge variant="success">Success</el-dm-badge>
<el-dm-badge variant="warning">Warning</el-dm-badge>
<el-dm-badge variant="error">Error</el-dm-badge>
<el-dm-badge variant="info">Info</el-dm-badge>

Sizes

<el-dm-badge size="sm">Small</el-dm-badge>
<el-dm-badge size="md">Medium</el-dm-badge>
<el-dm-badge size="lg">Large</el-dm-badge>

Pill Shape

<el-dm-badge pill>Pill Badge</el-dm-badge>

Dot Indicator

<el-dm-badge dot variant="success"></el-dm-badge>
<el-dm-badge dot variant="error"></el-dm-badge>

With Numbers

<el-dm-badge variant="error">5</el-dm-badge>
<el-dm-badge variant="primary">99+</el-dm-badge>

Status Indicators

<span>Online <el-dm-badge dot variant="success"></el-dm-badge></span>
<span>Offline <el-dm-badge dot variant="error"></el-dm-badge></span>
<span>Away <el-dm-badge dot variant="warning"></el-dm-badge></span>

License

MIT