import Chip from 'primevue/chip';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/chip/chip.min.js"></script>
Chip can display labels, icons and images.
<Chip label="Text Only" />
<Chip label="Text with icon" icon="pi pi-check" />
<Chip label="Text with image" image="user.png" />
Setting removable property displays an icon to close the chip, the optional remove event is available to get notified when a chip is hidden.
<Chip label="Text" removable />
Content can easily be customized with the default slot instead of using the built-in modes.
<Chip>
Content
</Chip>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | null | Defines the text to display. |
| icon | string | null | Defines the icon to display. |
| image | string | null | Defines the image to display. |
| removable | boolean | false | Whether to display a remove icon. |
| removeIcon | string | pi pi-times-circle | Icon of the remove element. |
| Name | Parameters | Description |
|---|---|---|
| remove | event: Browser event | Callback to invoke when a chip is removed. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-chip | Container element. |
| p-chip-image | Container element in image mode. |
| p-chip-text | Text of the chip. |
| p-chip-remove-icon | Remove icon. |
Chip uses the label property as the default aria-label, since any attribute is passed to the root element aria-labelledby or aria-label can be used to override the default behavior. Removable chips have a tabindex and focusable with the tab key.
| Key | Function |
|---|---|
| backspace | Hides removable. |
| enter | Hides removable. |
None.