Chip

Basic

Use a label for simple categories. Removable chips include an accessible remove button.

Icon

Use an icon class from your application or supply an icon template.

Image

Pair a person's name with an avatar. The name remains visible if the image cannot load.

Amy ElsnerAsiya JavayantOnyama LimbaXue Feng

Template

Project custom content to create a chip that matches your product.

Usage and API

import { AvChip } from 'avero-ui';

<av-chip label="Action" />
<av-chip label="Thriller" removable [(visible)]="visible"
  (onRemove)="handleRemove($event)" />
<av-chip label="Amy Elsner" image="amy.jpg" />
<av-chip label="Favorite">
  <ng-template #icon><span>★</span></ng-template>
</av-chip>
<av-chip><strong>A</strong><span>AVERO</span></av-chip>

AvChip accepts label, icon (CSS classes), image, alt, removable and removeAriaLabel. Image takes precedence over the icon. Images are decorative by default; use alt when the image adds meaning beyond the label. onImageError emits the native error event.

Removal sets visible to false and emits onRemove with the triggering event. Bind visible in both directions to restore a chip, or update your collection in onRemove. When removing items from a list, move focus to the next item or an appropriate control.

Tab focuses the remove button. Enter, Space, Backspace and Delete remove the chip. Set removeAriaLabel for custom content or a translated button label. Static chips do not add tab stops.

Customize --av-chip-background, --av-chip-color, --av-chip-radius, --av-chip-remove-hover-background and --av-chip-focus-color. Reference: PrimeNG Chip.