Chip

Chip represents entities using icons, labels and images.


import Chip from 'primevue/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.

Action
Comedy
Mystery
Thriller


<Chip label="Action" />
<Chip label="Comedy" />
<Chip label="Mystery" />
<Chip label="Thriller" removable />

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

Apple
Facebook
Google
Microsoft


<Chip label="Apple" icon="pi pi-apple" />
<Chip label="Facebook" icon="pi pi-facebook" />
<Chip label="Google" icon="pi pi-google" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />

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

Amy Elsner
Asiya Javayant
Onyama Limba
Xuxue Feng


<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" />
<Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" />
<Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" />
<Chip label="Xuxue Feng" image="/images/avatar/xuxuefeng.png" removable />

The default slot allows displaying custom content inside a chip.

PPRIME


<Chip class="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>
</Chip>

Following is the list of structural style classes, for theming classes visit theming page.

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.