Source: https://primereact.org/chip/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Chip

Chip represents entities using icons, labels and images.

Import#

import { Chip } from 'primereact/chip';

Copy

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.

Action

Comedy

Mystery

Thriller

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

Copy

Icon#

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

Copy

Image#

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

Copy

Template#

The template property allows displaying custom content inside a chip.

PPRIME

<Chip template={content} />

Copy

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. |

Import
Basic
Icon
Image
Template
Accessibility

PrimeReact 10.9.7 by PrimeTek