Chip

Chip represents entities using icons, labels and images.

Import #


import { Chip } 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 label="Comedy" />
<p-chip label="Mystery" />
<p-chip label="Thriller" [removable]="true" />

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" />

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" alt="Avatar image" />
<p-chip label="Asiya Javayant" image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" alt="Avatar image" />
<p-chip label="Onyama Limba" image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" alt="Avatar image" />
<p-chip label="Xuxue Feng" image="https://primefaces.org/cdn/primeng/images/demo/avatar/xuxuefeng.png" alt="Avatar image" [removable]="true" />

Template #

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

PPRIME


<p-chip class="!py-0 !pl-0 !pr-4">
    <span class="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">
        P
    </span>
    <span class="ml-2 font-medium">
        PRIME
    </span>
</p-chip>

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.

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.
alt	string	null	Alt attribute of the image.
style	Object	null	Inline style of the element.
styleClass	string	null	Class of the element.
removable	boolean	false	Whether to display a remove icon.
removeIcon	string	null	Icon of the remove element.
chipProps	ChipProps	null	Used to pass all properties of the chipProps to the Chip component.

name	parameters	description
onRemove	event : MouseEvent	Callback to invoke when a chip is removed.
onImageError	event : Event	This event is triggered if an error occurs while loading an image file.

name	parameters	description
content		Custom template of content.
removeicon		Custom template of remove icon.

class	description
p-chip	Class name of the root element
p-chip-image	Class name of the image element
p-chip-icon	Class name of the icon element
p-chip-label	Class name of the label element
p-chip-remove-icon	Class name of the remove icon element

token	variable	description
chip.border.radius	--p-chip-border-radius	Border radius of root
chip.padding.x	--p-chip-padding-x	Padding x of root
chip.padding.y	--p-chip-padding-y	Padding y of root
chip.gap	--p-chip-gap	Gap of root
chip.transition.duration	--p-chip-transition-duration	Transition duration of root
chip.background	--p-chip-background	Background of root
chip.color	--p-chip-color	Color of root
chip.image.width	--p-chip-image-width	Width of image
chip.image.height	--p-chip-image-height	Height of image
chip.icon.size	--p-chip-icon-size	Size of icon
chip.icon.color	--p-chip-icon-color	Color of icon
chip.remove.icon.size	--p-chip-remove-icon-size	Size of remove icon
chip.remove.icon.focus.ring.width	--p-chip-remove-icon-focus-ring-width	Focus ring width of remove icon
chip.remove.icon.focus.ring.style	--p-chip-remove-icon-focus-ring-style	Focus ring style of remove icon
chip.remove.icon.focus.ring.color	--p-chip-remove-icon-focus-ring-color	Focus ring color of remove icon
chip.remove.icon.focus.ring.offset	--p-chip-remove-icon-focus-ring-offset	Focus ring offset of remove icon
chip.remove.icon.focus.ring.shadow	--p-chip-remove-icon-focus-ring-shadow	Focus ring shadow of remove icon
chip.remove.icon.color	--p-chip-remove-icon-color	Color of remove icon

Chip

Import #

Basic #

Icon #

Image #

Template #

Accessibility #

Screen Reader

Keyboard Support

Chip API

Chip #

Properties #

Emitters #

Templates #

Chip Theming

CSS Classes #

Chip Design Tokens #