Chip
The Chip component is a universal element that is a small visual block containing various other elements such as avatars, text and icons. It offers options to customize colors, states and more.
Basic use
This example shows the chip in its simplest form, as a short label or filter without additional content.
Inserting other elements
It is also possible to display other elements in the chip element, for example avatar, label and icon elements.
Styling
Color variants
This example compares chip color variants to help choose an appropriate style for labels, filters, or statuses.
Styling with CSS custom properties
This example focuses on chip styling through CSS variables instead of changing markup or API settings.
When to use
Use wje-chip to improve readability, scannability, and contextual understanding of content.
When not to use
Do not replace structured interactive data with media-only presentation when precision is needed.
Accessibility
Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.
Best Practices
- Compress media and use lazy loading in larger collections.
- Keep information priority consistent across cards/lists.
- Avoid duplicating the same meaning in icon and text without added value.
Attributes and Properties
disabled
| Description | Sets the disabled state of the element. If true, the 'disabled' attribute is added to the element. If false, the 'disabled' attribute is removed from the element. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
label
| Description | Sets the user-visible or accessible label text. |
| Attribute | label |
| Type | any |
| Default | - |
removable
| Description | Sets or removes the "removable" attribute on the element. |
| Attribute | removable |
| Type | boolean |
| Default | false |
round
| Description | Sets or removes the "round" attribute on the element based on the provided value. |
| Attribute | round |
| Type | boolean |
| Default | false |
size
| Description | Retrieves the 'size' attribute of the current element. |
| Attribute | size |
| Type | string |
| Default | - |
Events
| Name | Description |
|---|---|
wje-chip:remove | Dispatched when the chip is removed;. |
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The component's native wrapper. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
default | Default slot for the main component content. |