React Chip represents entities using icons, labels and images.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
Import
import { Chip } from 'primereact/chip';
Getting Started
Chip can display labels, icons and images.
<Chip label="Text Only" />
<Chip label="Text with icon" icon="pi pi-check" />
<Chip label="Text with image" image="user.png" />
Removable
Setting removable property displays an icon to close the chip, the optional onRemove event is available to get notified when a chip is hidden.
<Chip label="Text" removable />
Templating
Content can easily be customized with the template property instead of using the built-in modes.
<Chip template="Content" />
<Chip template={<span>Content<span>} />
<Chip template={(props) => <span>Content<span>} />
Theming
Chip supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact Chip showcase for demos and documentation.