ChipComponent

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

Example

HTML

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

Signature

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

icon

propertystring

The icon should be the name of one of the available Clarity icons: https://clarity.design/foundation/icons/shapes/

invert

property

colorFrom

property

If set, the chip will have an auto-generated background color based on the string value passed in.

colorType

property'error' | 'success' | 'warning'

The color of the chip can also be one of the standard status colors.

iconClick

property

ChipComponent

@vendure/admin-ui Source

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

Example

HTML

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

Signature

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

icon

propertystring

The icon should be the name of one of the available Clarity icons: https://clarity.design/foundation/icons/shapes/

invert

property

colorFrom

property

If set, the chip will have an auto-generated background color based on the string value passed in.

colorType

property'error' | 'success' | 'warning'

The color of the chip can also be one of the standard status colors.

iconClick

property