Chip

The Chip component displays compact elements representing tags, filters, or selections.

Installation

npm install @duskmoon-dev/el-chip

Usage

import '@duskmoon-dev/el-chip/register';
<el-dm-chip>Tag</el-dm-chip>

Live Demo

Chip Variants

DefaultPrimarySecondarySuccess

Properties

PropertyTypeDefaultDescription
variant'filled' | 'outlined' | 'soft''filled'Visual style
color'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info'-Chip color
size'sm' | 'md' | 'lg''md'Chip size
deletablebooleanfalseShows delete button
selectedbooleanfalseSelected state
disabledbooleanfalseDisabled state

Colors

Chip Colors

PrimarySecondarySuccessWarningErrorInfo 
<el-dm-chip color="primary">Primary</el-dm-chip>
<el-dm-chip color="secondary">Secondary</el-dm-chip>
<el-dm-chip color="success">Success</el-dm-chip>

Variants

Chip Variants

FilledOutlinedSoft 
<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>

Sizes

Chip Sizes

SmallMediumLarge 
<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

Deletable Chips

DeletableRemove me 
<el-dm-chip deletable>Deletable</el-dm-chip>

Selected State

Selected Chips

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

Events

EventDescription
clickFired when chip is clicked
deleteFired when delete button is clicked

Event Handling

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

Slots

SlotDescription
defaultChip content
iconLeading icon

CSS Parts

PartDescription
chipThe chip container
iconThe icon container
deleteThe delete button

Accessibility

  • Uses role="button" for interactive chips
  • Keyboard accessible with focus states
  • Deletable chips have accessible delete buttons