Vue3 Chip represents entities using icons, labels and images. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import Chip from 'primevue/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 remove event is available to get notified when a chip is hidden.
<Chip label="Text" removable />
Templating
Content can easily be customized with the default slot instead of using the built-in modes.
<Chip>
Content
</Chip>
Theming
Chip supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue Chip showcase for demos and documentation.