vendure/docs/docs/reference/admin-ui-api/components/chip-component.md

---

title: "ChipComponent" weight: 10 showtoc: true

generated: true

import MemberInfo from '@site/src/components/MemberInfo'; import GenerationInfo from '@site/src/components/GenerationInfo'; import MemberDescription from '@site/src/components/MemberDescription';

ChipComponent

A chip component for displaying a label with an optional action icon.

Example

<vdr-chip [colorFrom]="item.value"
          icon="close"
          (iconClick)="clear(item)">
{{ item.value }}</vdr-chip>

class ChipComponent {
  @Input() @Input() icon: string;
  @Input() @Input() invert = false;
  @Input() @Input() colorFrom = '';
  @Input() @Input() colorType: 'error' | 'success' | 'warning';
  @Output() @Output() iconClick = new EventEmitter<MouseEvent>();
}

### icon The icon should be the name of one of the available Clarity icons: https://clarity.design/foundation/icons/shapes/ ### invert ### colorFrom If set, the chip will have an auto-generated background color based on the string value passed in. ### colorType The color of the chip can also be one of the standard status colors. ### iconClick