Chip

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.

Action
Comedy
Mystery
Thriller

<p-chip label="Action" />

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

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

Avatar image
Amy Elsner
Avatar image
Asiya Javayant
Avatar image
Onyama Limba
Avatar image
Xuxue Feng

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

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

PPRIME

<p-chip styleClass="pl-0 pr-3">
    <span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
        P
    </span>
    <span class="ml-2 font-medium">
        PRIME
    </span>
</p-chip>

NameElement
p-chipContainer element.
p-chip-imageContainer element in image mode.
p-chip-textText of the chip.
pi-chip-remove-iconRemove icon.

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

KeyFunction
backspaceHides removable.
enterHides removable.