Chip

Chip represents entities using icons, labels and images.

Import #


import { ChipModule } from 'primeng/chip';

Basic #

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.

Action

Comedy

Mystery

Thriller



<p-chip label="Action"></p-chip>

Icon #

A font icon next to the label can be displayed with the icon property.

Apple

Facebook

Google

Microsoft



<p-chip label="Apple" icon="pi pi-apple"></p-chip>

Image #

The image property is used to display an image like an avatar.

Amy Elsner

Asiya Javayant

Onyama Limba

Xuxue Feng



<p-chip label="Amy Elsner" image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"></p-chip>

Custom Content #

Content can easily be customized with the dynamic content instead of using the built-in modes.

Content



<p-chip>
    <div class="p-2">Content</div>
</p-chip>

Style #

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.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility #

Screen Reader

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.

Keyboard Support

Key	Function
backspace	Hides removable.
enter	Hides removable.

Chip API

API defines helper props, events and others for the PrimeNG Chip module.

Properties #

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.

Templates #

Name	Parameters
content	-
removeicon	$implicit: close($event)

Events #

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.