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
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
Styling with CSS custom properties
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
removable
| Description | Determines if the element has the 'removable' attribute. |
| Attribute | removable |
| Type | boolean |
| Default | - |
disabled
| Description | Determines if the element has the 'disabled' attribute. |
| Attribute | disabled |
| Type | boolean |
| Default | - |
label
| Description | Sets the user-visible or accessible label text. |
| Attribute | label |
| Type | any |
| 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. |