Getting Started with Kendo UI for Angular Badge

The Badge component is a visual indicator for UI elements. It enables you to easily show statuses, notifications and short messages in your app. Badges provide additional contextual information for other elements on the page.

Basic Usage

The Badge can be nested in relatively positioned elements. If the target element cannot host content, then the Badge is applied with a BadgeContainer. The following demo demonstrates both approaches in action.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <div class="example-wrap">

                <team-contacts></team-contacts>
                <social-apps></social-apps>

                <div class="status">
                    <button class="k-button">
                        New Updates
                        <kendo-badge shape="dot" themeColor="info"></kendo-badge>
                    </button>

                    <span class="k-icon k-i-bell notifications">
                        <kendo-badge shape="dot" themeColor="warning"></kendo-badge>
                    </span>
                </div>

            </div>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .example {
            display: flex;
            align-items: center;
            flex-direction: column;
        }
        .example .status {
            display: flex;
            justify-content: space-between;
            padding: 12px 14px;
        }
        .example-wrap {
            border: 1px solid #ccc;
            width: 230px;
        }
        .notifications {
            position: relative;
            align-self: center;
            font-size: 21px;
            color: #6c757d;
        }
    `]
})
export class AppComponent {}
import { Component, ViewEncapsulation } from '@angular/core';
import { BadgeAlign } from '@progress/kendo-angular-indicators';

@Component({
    selector: 'team-contacts',
    template: `
        <div class="contacts">
            <div class="k-hbox">
                <kendo-badge-container>
                    <kendo-avatar shape="circle" [imageSrc]="managerAvatar"></kendo-avatar>
                    <kendo-badge size="small" themeColor="error" [align]="badgeAlign" cutoutBorder="true">
                        <kendo-icon [name]="'minus'" class="k-badge-icon"></kendo-icon>
                    </kendo-badge>
                </kendo-badge-container>

                <div class="contact-info">
                    <h2>Michael Holz</h2>
                    <p>Manager</p>
                </div>
            </div>

            <div class="k-hbox">
                <kendo-badge-container>
                    <kendo-avatar shape="circle" [imageSrc]="designerAvatar"></kendo-avatar>
                    <kendo-badge size="small" themeColor="success" [align]="badgeAlign" cutoutBorder="true">
                        <kendo-icon [name]="'check'" class="k-badge-icon"></kendo-icon>
                    </kendo-badge>
                </kendo-badge-container>

                <div class="contact-info">
                    <h2>Lilly Nelson</h2>
                    <p>UX Designer</p>
                </div>
            </div>

            <div class="k-hbox">
                <kendo-badge-container>
                    <kendo-avatar shape="circle" [imageSrc]="pmAvatar"></kendo-avatar>
                    <kendo-badge size="small" themeColor="warning" [align]="badgeAlign" cutoutBorder="true">
                        <kendo-icon [name]="'clock'" class="k-badge-icon"></kendo-icon>
                    </kendo-badge>
                </kendo-badge-container>

                <div class="contact-info">
                    <h2>André Stewart</h2>
                    <p>Product Manager</p>
                </div>
            </div>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .contacts h2 {
            font-size: 1.3em;
            font-weight: normal;
            margin: 0;
        }
        .contacts p {
            margin: 0;
            font-size: 0.8em;
        }
        .k-hbox {
            align-items: center;
            border-bottom: 1px solid #ccc;
            padding: 12px 14px;
        }
        .k-hbox .contact-info {
            margin-left: 1em;
        }
        .k-badge .k-icon {
            color: white;
        }
    `]
})
export class ContactsComponent {
    public badgeAlign: BadgeAlign = { vertical: 'bottom', horizontal: 'end' };
    public designerAvatar = 'https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg';
    public managerAvatar = 'https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg';
    public pmAvatar = 'https://demos.telerik.com/kendo-ui/content/web/Customers/GOURL.jpg';
}
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'social-apps',
    template: `
        <div class="wrap">
            <kendo-badge-container>
                <kendo-icon [name]="'facebook-box'" class="social"></kendo-icon>
                <kendo-badge>11</kendo-badge>
            </kendo-badge-container>

            <kendo-badge-container>
                <kendo-icon [name]="'twitter-box'" class="social"></kendo-icon>
                <kendo-badge>3</kendo-badge>
            </kendo-badge-container>

            <kendo-badge-container>
                <kendo-icon [name]="'vimeo-box'" class="social"></kendo-icon>
                <kendo-badge>77</kendo-badge>
            </kendo-badge-container>

            <kendo-badge-container>
                <kendo-icon [name]="'email-box'" class="social"></kendo-icon>
                <kendo-badge>14+</kendo-badge>
            </kendo-badge-container>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .wrap {
            display: flex;
            justify-content: space-between;
            padding: 21px 14px;
            border-bottom: 1px solid #ccc;
        }
        .k-icon.social {
            font-size: 28px;
        }
        .k-i-twitter-box {
            color: #4EB9ED;
        }
        .k-i-facebook-box {
            color: #5270A4;
        }
        .k-i-vimeo-box {
            color: #B3D062;
        }
    `]
})
export class SocialAppsComponent {}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { IconsModule } from '@progress/kendo-angular-icons';
import { IndicatorsModule } from '@progress/kendo-angular-indicators';

import { AppComponent } from './app.component';
import { ContactsComponent } from './contacts.component';
import { SocialAppsComponent } from './social-apps.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        LayoutModule,
        ButtonsModule,
        IconsModule,
        IndicatorsModule
    ],
    declarations: [
        AppComponent,
        ContactsComponent,
        SocialAppsComponent
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Functionality and Features

In this article