Appearance

The Chip component provides two predefined appearance options.

These styling options enable you to add a filled or an outlined chips
by setting the look property.

Filled Chip

The Filled Chip sets a background color to its content.

This is the default Chip styling if the look property is filled or not provided.

import { Component, ViewEncapsulation } from '@angular/core';

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

@Component({
    selector: 'my-app',
    template: `
        <p>Filled chips</p>

        <kendo-chip
            *ngFor="let chip of chips"
            [look]="chip.look"
            [label]="chip.label"
            [icon]="chip.icon"
            [removable]="chip.removable"
            (remove)="onRemove($event)"
        >
        </kendo-chip>
    `,
    styles: [`
        .k-chip {
            margin-right: 10px;
         }
    `],
    encapsulation: ViewEncapsulation.None
})
class AppComponent {
    public chips = [
        {
            look: 'filled',
            label: 'Apple',
            icon: 'marker-pin-target',
            removable: true
        },
        {
            look: 'filled',
            label: 'Strawberry',
            icon: 'marker-pin-target',
            removable: true
        },
        {
            look: 'filled',
            label: 'Banana',
            icon: 'marker-pin-target',
            removable: true
        }
    ];

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

Outlined Chip

The Outlined Chip sets a transparent background and a solid border.

To render an Outlined Chip, use the look="outlined" configuration.

import { Component, ViewEncapsulation } from '@angular/core';

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

@Component({
    selector: 'my-app',
    template: `
        <p>Outlined chips</p>

        <kendo-chip
            *ngFor="let chip of chips"
            [look]="chip.look"
            [label]="chip.label"
            [icon]="chip.icon"
            [removable]="chip.removable"
            (remove)="onRemove($event)"
        >
        </kendo-chip>
    `,
    styles: [`
        .k-chip {
            margin-right: 10px;
         }
    `],
    encapsulation: ViewEncapsulation.None
})
class AppComponent {
    public chips = [
        {
            look: 'outlined',
            label: 'Apple',
            icon: 'marker-pin-target',
            removable: true
        },
        {
            look: 'outlined',
            label: 'Strawberry',
            icon: 'marker-pin-target',
            removable: true
        },
        {
            look: 'outlined',
            label: 'Banana',
            icon: 'marker-pin-target',
            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