Search results

Types in Angular Badge component

17 Sep 2021 / 3 minutes to read

This section explains different styles and types of the badges.

Badge styles

The Essential JS 2 Badge has the following predefined styles that can be used with .e-badge class to change the appearance of a badge.

Class Name Description
e-badge-primary Represents a primary notification.
e-badge-secondary Represents a secondary notification.
e-badge-success Represents a positive notification.
e-badge-danger Represents a negative notification.
e-badge-warning Represents notification with caution.
e-badge-info Represents an informative notification.
e-badge-light Represents notification in light variant.
e-badge-dark Represents notification in dark variant.
Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id='element'>
            <div class="sample_container">
                <div class="block" style="display:inline-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <div>
                                <span class="e-badge e-badge-primary">Primary</span>
                            </div>
                        </div>
                        <div class="e-card-content">
                            <div>
                                <code>.e-badge-primary</code>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="block" style="display:inline-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <span class="e-badge e-badge-secondary">Secondary</span>
                        </div>
                        <div class="e-card-content">
                            <code>.e-badge-secondary</code>
                        </div>
                    </div>
                </div>

                <div class="block" style="display:inline-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <span class="e-badge e-badge-success">Success</span>
                        </div>
                        <div class="e-card-content">
                            <code>.e-badge-success</code>
                        </div>
                    </div>
                </div>

                <div class="block" style="display:inline-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <span class="e-badge e-badge-danger">Danger</span>
                        </div>
                        <div class="e-card-content">
                            <code>.e-badge-danger</code>
                        </div>
                    </div>
                </div>

                <div class="block" style="display:inline-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <span class="e-badge e-badge-warning">Warning</span>
                        </div>
                        <div class="e-card-content">
                            <code>.e-badge-warning</code>
                        </div>
                    </div>
                </div>

                <div class="block" style="display:inline-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <span class="e-badge e-badge-info">Info</span>
                        </div>
                        <div class="e-card-content">
                            <code>.e-badge-info</code>
                        </div>
                    </div>
                </div>

                <div class="block" style="display:inline-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <span class="e-badge e-badge-light">Light</span>
                        </div>
                        <div class="e-card-content">
                            <code>.e-badge-light</code>
                        </div>
                    </div>
                </div>

                <div class="block" style="display:inline-block">
                    <div class="e-card e-badge-showcase">
                        <div class="e-card-content">
                            <span class="e-badge e-badge-dark">Dark</span>
                        </div>
                        <div class="e-card-content">
                            <code>.e-badge-dark</code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Badge types

The types of Essential JS 2 badges are as follows:

  • Circle
  • Pill
  • Link
  • Notification
  • Overlap
  • Dot
  • Position

Circle

The circle badge style can be applied by adding the modifier class .e-badge-circle to the target element.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id='element'>
            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="skype svg_icons"></div>
                <span class="e-badge e-badge-success e-badge-overlap e-badge-notification e-badge-circle">18</span>
            </div>

            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="twitter svg_icons"></div>
                <span class="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">9</span>
            </div>

            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="facebook svg_icons"></div>
                <span class="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">2</span>
            </div>

            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="firefox svg_icons"></div>
                <span class="e-badge e-badge-danger e-badge-overlap e-badge-notification e-badge-circle">35</span>
            </div>
        </div>
    `
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Pill

The pill badge style can be applied by adding the modifier class .e-badge-pill to the target element.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id='element'>
            <h1>Badge Component <span class="e-badge e-badge-primary e-badge-pill">New</span></h1>
    </div>
    `
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

When badge modifier classes are applied to the anchor tag, the badge’s appearance will change from normal state to hover state on mouseover.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id='element'>
            <div style="display: inline-block; margin-top: 15px;">
                <a href="#" class="e-badge e-badge-primary">Link Badge</a>
            </div>
    </div>
    `
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Notification

The notification badge style can be applied by adding the modifier class .e-badge-notification to the target element. Notification badges are used when a content or a context needs special attention. While using the notification badge, set the parent element to position: relative.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id='element'>
            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="skype svg_icons"></div>
                <span class="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
            </div>

            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="twitter svg_icons"></div>
                <span class="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
            </div>

            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="facebook svg_icons"></div>
                <span class="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
            </div>

            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="firefox svg_icons"></div>
                <span class="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
            </div>
    </div>
    `
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Dot

Dot can be applied by adding the modifier class .e-badge-dot to the target element. Dot badges are similar to notification badges, but in a minimalistic way. While using the dot badge, set the parent element to position: relative .

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id='element'>
            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="skype svg_icons"></div>
                <span class="e-badge e-badge-success e-badge-overlap e-badge-dot"></span>
            </div>

            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="twitter svg_icons"></div>
                <span class="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
            </div>

            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="facebook svg_icons"></div>
                <span class="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
            </div>

            <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
                <div class="firefox svg_icons"></div>
                <span class="e-badge e-badge-danger e-badge-overlap e-badge-dot"></span>
            </div>
        </div>
    `
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Overlap

The overlap badge can be used with notification or dot badge, which overlaps with the target -element by adding the modifier class .e-badge-overlap. While using the overlap badge, set the parent element to position: relative.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id='element'>
    <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
        <div class="skype svg_icons"></div>
        <span class="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
    </div>

    <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
        <div class="twitter svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
    </div>

    <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
        <div class="facebook svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
    </div>

    <div style="position:relative;display:inline-block;margin:20px 20px 10px 20px;">
        <div class="firefox svg_icons"></div>
        <span class="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
    </div>
</div>
    `
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Position

The default position of the notification or dot badge is top. But, the position can be changed to bottom using the modifier class .e-badge-bottom. For example, the bottom class modifier is used with dot badge to display the status in the avatar as shown in the following sample.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <div id='element'>
            <div class="badge-block">
                <div class="contact svg_icons"></div>
                <!-- Success Colored Bottom Dot Badge -->
                <span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
            </div>

            <div class="badge-block">
                <div class="skype svg_icons"></div>
                <!-- Info Colored Bottom Dot Badge -->
                <span class="e-badge e-badge-info e-badge-overlap e-badge-dot e-badge-bottom"></span>
            </div>

            <div class="badge-block">
                <div class="facebook svg_icons"></div>
                <!-- Info Colored Dot Badge -->
                <span class="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
            </div>

            <div class="badge-block">
                <div class="pinterest svg_icons"></div>
                <!-- Danger Colored Dot Badge -->
                <span class="e-badge e-badge-danger e-badge-overlap e-badge-dot  e-badge-bottom"></span>
            </div>
    </div>
    `
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);