Chip

Chips are compact elements that represent an input, attribute, or action.

Filled Chips

Default

Primary

Secondary

Error

Success

Warning

Info

<me-chip>Default</me-chip> <me-chip color="primary">Primary</me-chip>

Outlined Chips

Default

Primary

Secondary

Error

<me-chip variant="outlined" color="primary">Primary</me-chip>

Clickable

Primary

Outlined

Deletable

Click the ✕ icon to remove a chip. The chip fires a me-delete event — your code removes it.

Deletable

Primary

Clickable + Deletable

<me-chip deletable>Deletable</me-chip> <script> document.querySelectorAll('me-chip[deletable]').forEach(chip => { chip.addEventListener('me-delete', () => chip.remove()); }); </script>

Sizes

Small

Medium (default)

Small deletable

Disabled

Disabled primary

Disabled outlined

API

Attribute	Type	Default	Description
`variant`	filled \| outlined	filled	Visual style.
`color`	default \| primary \| secondary \| error \| success \| warning \| info	default	Chip color.
`size`	small \| medium	medium	Chip size.
`clickable`	boolean	false	Makes the chip clickable with ripple.
`deletable`	boolean	false	Shows a delete icon button.
`disabled`	boolean	false	Disables the chip.

Events

Event	Description
`me-delete`	Fired when the delete icon is clicked.