Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
import Chip from 'primevue/chip';
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" />
Setting removable property displays an icon to close the chip, the optional remove event is available to get notified when a chip is hidden.
<Chip label="Text" removable />
Content can easily be customized with the default slot instead of using the built-in modes.
<Chip> Content </Chip>
Chip supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Visit the PrimeVue Chip showcase for demos and documentation.