@duskmoon-dev/el-chip

A chip/tag component built with Web Components.

Installation

bun add @duskmoon-dev/el-chip

Usage

Auto-Register

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

<el-dm-chip>Label</el-dm-chip>

Manual Registration

import { ElDmChip, register } from '@duskmoon-dev/el-chip';

// Register with default tag name
register();

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

Variants

| Variant | Description | |---------|-------------| | filled | Filled background (default) | | outlined | Outlined style | | soft | Soft/subtle background |

Sizes

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

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | variant | string | 'filled' | Style variant | | color | string | 'primary' | Color variant | | size | string | 'md' | Size: sm, md, lg | | deletable | boolean | false | Show delete button | | selected | boolean | false | Selected state | | disabled | boolean | false | Disabled state |

Slots

| Slot | Description | |------|-------------| | (default) | Chip label | | icon | Icon before label |

CSS Parts

| Part | Description | |------|-------------| | chip | The chip element | | icon | The icon container | | delete | The delete button |

Events

| Event | Detail | Description | |-------|--------|-------------| | delete | - | Fired when delete button is clicked | | click | - | Fired when chip is clicked |

Examples

Basic

<el-dm-chip>Default</el-dm-chip>

Variants

<el-dm-chip variant="filled">Filled</el-dm-chip>
<el-dm-chip variant="outlined">Outlined</el-dm-chip>
<el-dm-chip variant="soft">Soft</el-dm-chip>

Colors

<el-dm-chip color="primary">Primary</el-dm-chip>
<el-dm-chip color="success">Success</el-dm-chip>
<el-dm-chip color="warning">Warning</el-dm-chip>
<el-dm-chip color="error">Error</el-dm-chip>

Sizes

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

Deletable

<el-dm-chip deletable>Removable</el-dm-chip>

Selected

<el-dm-chip selected>Selected</el-dm-chip>

With Icon

<el-dm-chip>
  <span slot="icon">⭐</span>
  Featured
</el-dm-chip>

Handling Delete

const chip = document.querySelector('el-dm-chip');
chip.addEventListener('delete', () => {
  chip.remove();
});

License

MIT