Chip

Chip represents entities using icons, labels and images.

Action

Comedy

Mystery

Thriller

Apple

Facebook

Google

Microsoft

Amy Elsner

Asiya Javayant

Onyama Limba

Xuxue Feng

Action

Apple

Onyama Limba

Xuxue Feng


import { Chip } from 'primereact/chip';


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/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 onRemoveevent is available to get notified when a chip is hidden.


<Chip label="Text" removable />

Content can easily be customized with the template property instead of using the built-in modes.


<Chip template="Content" />
<Chip template={<span>Content<span>} />
<Chip template={(props) => <span>Content<span>} />

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.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
template	any	null	Template of an item.
imageAlt	any	null	It specifies an alternate text for an image, if the image cannot be displayed.

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.