Chip represents entities using icons, labels and images.
import { ChipModule } from 'primeng/chip';
A basic chip with a text is created with the label property. In addition when removable is added, a delete icon is displayed to remove a chip, the optional onRemove event is available to get notified when a chip is hidden.
<p-chip label="Action"></p-chip>
A font icon next to the label can be displayed with the icon property.
<p-chip label="Apple" icon="pi pi-apple"></p-chip>
The image property is used to display an image like an avatar.
<p-chip label="Amy Elsner" image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"></p-chip>
Content can easily be customized with the dynamic content instead of using the built-in modes.
<p-chip>
<div class="p-2">Content</div>
</p-chip>
Name | Element |
---|---|
p-chip | Container element. |
p-chip-image | Container element in image mode. |
p-chip-text | Text of the chip. |
pi-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. |
API defines helper props, events and others for the PrimeNG Chip module.
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. |
style | object | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
removeIcon | string | null | Icon of the remove element. |
Name | Parameters |
---|---|
content | - |
removeicon | $implicit: close($event) |
Name | Parameters | Description |
---|---|---|
onRemove | event: Browser event | Callback to invoke when a chip is removed. |
onImageError | event: Browser event | This event is triggered if an error occurs while loading an image file. |