Chip
Chip represents entities using icons, labels and images.
Usage#
import { Chip } from 'primereact/chip';<Chip>
<Chip.Label>Chip</Chip.Label>
</Chip>Examples#
Basic#
A basic chip with a text is created with the Chip.Label component. In addition when Chip.RemoveIcon is added, a delete icon is displayed to remove a chip.
Action
Comedy
Mystery
Thriller
import { Chip } from 'primereact/chip';
export default function BasicDemo() {
return (
<div className="card flex flex-wrap gap-2">
<Chip>
<Chip.Label>Action</Chip.Label>
</Chip>
<Chip>
<Chip.Label>Comedy</Chip.Label>
</Chip>
<Chip>
<Chip.Label>Mystery</Chip.Label>
</Chip>
<Chip>
<Chip.Label>Thriller</Chip.Label>
<Chip.RemoveIcon />
</Chip>
</div>
);
}Icon#
A font icon next to the label can be displayed with the className property.
Apple
Facebook
Google
Microsoft
GitHub
import { Chip } from 'primereact/chip';
export default function IconDemo() {
return (
<div className="card flex flex-wrap gap-2">
<Chip>
<Chip.Icon className="pi pi-apple" />
<Chip.Label>Apple</Chip.Label>
</Chip>
<Chip>
<Chip.Icon className="pi pi-facebook" />
<Chip.Label>Facebook</Chip.Label>
</Chip>
<Chip>
<Chip.Icon className="pi pi-google" />
<Chip.Label>Google</Chip.Label>
</Chip>
<Chip>
<Chip.Icon className="pi pi-microsoft" />
<Chip.Label>Microsoft</Chip.Label>
<Chip.RemoveIcon />
</Chip>
<Chip>
<Chip.Icon className="pi pi-github" />
<Chip.Label>GitHub</Chip.Label>
<Chip.RemoveIcon asChild>
<i className="pi pi-minus-circle" />
</Chip.RemoveIcon>
</Chip>
</div>
);
}Image#
The Chip.Image is used to display an image like an avatar.
Amy Elsner
Asiya Javayant
Onyama Limba
Xuxue Feng
import { Chip } from 'primereact/chip';
export default function ImageDemo() {
return (
<div className="card flex flex-wrap gap-2">
<Chip>
<Chip.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
<Chip.Label>Amy Elsner</Chip.Label>
</Chip>
<Chip>
<Chip.Image src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
<Chip.Label>Asiya Javayant</Chip.Label>
</Chip>
<Chip>
<Chip.Image src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
<Chip.Label>Onyama Limba</Chip.Label>
</Chip>
<Chip>
<Chip.Image src="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" />
<Chip.Label>Xuxue Feng</Chip.Label>
<Chip.RemoveIcon />
</Chip>
</div>
);
}Template#
Chip also allows displaying custom content inside a itself.
PPRIME
import { Chip } from 'primereact/chip';
export default function TemplateDemo() {
return (
<div className="card">
<Chip className="py-0 pl-0 pr-4">
<span className="bg-primary text-primary-contrast rounded-full w-8 h-8 flex items-center justify-center">P</span>
<span className="ml-2 font-medium">PRIME</span>
</Chip>
</div>
);
}Accessibility#
Screen Reader#
Chip uses the label property as the default aria-label. Any attribute passed to the root element like aria-labelledby or aria-label can be used to override the default behavior. Removable chips are focusable with the tab key.
Keyboard Support#
| Key | Function |
|---|---|
| backspace | Hides removable chip |
| enter | Hides removable chip |