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 Usage
Inserting other elements
It is also possible to display other elements in the chip element, for example avatar, label and icon elements.
Styling
Colour variants
Styling with CSS custom properties
Attributes and Properties
active
| Description | If true, the check icon is displayed |
| Attribute | active |
| Type | boolean |
| Default | false |
color
| Description | Specifies the background color of the chip element. The default options are "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information, go to: theming. |
| Attribute | color |
| Type | "danger." ｜ "primary" ｜ "success" ｜ "neutral" ｜ "complete" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
disabled
| Description | If true, the user cannot interact with the element. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--background | Background element chip |
--color | Element colour chip |
Slots
No slots available for this component.