Badge

The Badge component displays status indicators, counts, or labels in a compact format.

Installation

npm install @duskmoon-dev/el-badge

Usage

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

<el-dm-badge color="primary">New</el-dm-badge>

Live Demo

Badge Colors

Primary

Secondary

Success

Warning

Error

Info

Properties

Property	Type	Default	Description
`variant`	`'filled' \| 'outlined' \| 'soft'`	`'filled'`	Visual style
`color`	`'primary' \| 'secondary' \| 'tertiary' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'primary'`	Badge color
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Badge size
`pill`	`boolean`	`false`	Use pill (rounded) shape
`dot`	`boolean`	`false`	Show as dot indicator only

Variants

Badge Variants

Filled

Outlined

Soft

<el-dm-badge variant="filled" color="primary">Filled</el-dm-badge>
<el-dm-badge variant="outlined" color="primary">Outlined</el-dm-badge>
<el-dm-badge variant="soft" color="primary">Soft</el-dm-badge>

Sizes

Badge Sizes

Small

Medium

Large

<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

Pill Badges

99+

Active

Offline

<el-dm-badge pill color="primary">99+</el-dm-badge>
<el-dm-badge pill color="success">Active</el-dm-badge>

Dot Indicator

Dot Badges

Status: Status: Status:

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

CSS Parts

Part	Description
`badge`	The badge container

Accessibility

Badges are purely visual indicators
Ensure important information is also conveyed through text
Color alone should not be the only means of conveying information