Chip
Chip represents entities using icons, labels and images.
Import #
import { ChipModule } from 'primeng/chip';
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, the optional onRemove event is available to get notified when a chip is hidden.
<p-chip label="Action" />
Icon #
A font icon next to the label can be displayed with the icon property.
<p-chip label="Apple" icon="pi pi-apple" />
Image #
The image property is used to display an image like an avatar.
<p-chip
label="Amy Elsner"
image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
alt="Avatar image" />
Custom Content #
Content can easily be customized with the dynamic content instead of using the built-in modes.
<p-chip styleClass="pl-0 pr-3">
<span class="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">
P
</span>
<span class="ml-2 font-medium">
PRIME
</span>
</p-chip>
Style #
| Name | Element |
|---|---|
| p-chip | Container element. |
| p-chip-image | Container element in image mode. |
| p-chip-text | Text of the chip. |
| pi-chip-remove-icon | Remove icon. |
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. |
Chip API
API defines helper props, events and others for the PrimeNG Chip module.
Chip #
Chip represents people using icons, labels and images.
Properties #
Defines the input properties of the component.
Emitters #
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
Templates #
Defines the templates used by the component.