chip-component.md 1.8 KB
title: "ChipComponent" weight: 10 date: 2023-06-13T12:31:12.924Z showtoc: true
generated: true
ChipComponent
# ChipComponent
{{< generation-info sourceFile="packages/admin-ui/src/lib/core/src/shared/components/chip/chip.component.ts" sourceLine="16" packageName="@vendure/admin-ui">}}
A chip component for displaying a label with an optional action icon.
*Example*
```HTML
{{ item.value }}
```
## Signature
```TypeScript
class ChipComponent {
@Input() @Input() icon: string;
@Input() @Input() invert = false;
@Input() @Input() colorFrom = '';
@Input() @Input() colorType: 'error' | 'success' | 'warning';
@Output() @Output() iconClick = new EventEmitter();
}
```
## Members
### icon
{{< member-info kind="property" type="string" >}}
{{< member-description >}}The icon should be the name of one of the available Clarity icons: https://clarity.design/foundation/icons/shapes/{{< /member-description >}}
### invert
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}
### colorFrom
{{< member-info kind="property" type="" >}}
{{< member-description >}}If set, the chip will have an auto-generated background
color based on the string value passed in.{{< /member-description >}}
### colorType
{{< member-info kind="property" type="'error' | 'success' | 'warning'" >}}
{{< member-description >}}The color of the chip can also be one of the standard status colors.{{< /member-description >}}
### iconClick
{{< member-info kind="property" type="" >}}
{{< member-description >}}{{< /member-description >}}