Components / Buttons / Chip

Types

The Chip component allows you to set different chip types.

Each chip type is color-coded which allows the user to immediately recognize, whether the Chip indicates a successful operation or an error message.
To use the predefined styles for each chip type, pass a value in the type input property.

The available type values are:

  • none
  • success
  • info
  • error
  • warning
import { Component, ViewEncapsulation } from '@angular/core';

import { ChipComponent, ChipRemoveEvent } from '@progress/kendo-angular-button';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chip
            *ngFor="let chip of chips"
            [label]="chip.label"
            [icon]="chip.icon"
            [type]="chip.type"
            [removable]="chip.removable"
            (remove)="onRemove($event)"
        >
        </kendo-chip>
    `,
    styles: [`
        .k-chip {
            margin-right: 10px;
         }
    `],
    encapsulation: ViewEncapsulation.None
})
class AppComponent {
    public chips = [
        {
            label: 'None',
            icon: 'marker-pin-target',
            type: 'none',
            removable: true
        },
        {
            label: 'Success',
            icon: 'marker-pin-target',
            type: 'success',
            removable: true
        },
        {
            label: 'Info',
            icon: 'marker-pin-target',
            type: 'info',
            removable: true
        },
        {
            label: 'Error',
            icon: 'marker-pin-target',
            type: 'error',
            removable: true
        },
        {
            label: 'Warning',
            icon: 'marker-pin-target',
            type: 'warning',
            removable: true
        }
    ];

    public onRemove(e: ChipRemoveEvent): void {
        const index = this.chips.findIndex(c => c.label === e.sender.label);
        this.chips.splice(index, 1);
    }
}

In this article