Types in Angular Badge component
27 Apr 202424 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. |
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
@Component({
imports: [
],
standalone: true,
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 { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
@Component({
imports: [
],
standalone: true,
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 { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Pill
The pill badge style can be applied by adding the modifier class .e-badge-pill
to the target element.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
@Component({
imports: [
],
standalone: true,
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 { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Link
When badge modifier classes are applied to the anchor tag, the badge’s appearance will change from normal state to hover state on mouseover.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
@Component({
imports: [
],
standalone: true,
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 { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
@Component({
imports: [
],
standalone: true,
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 { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
@Component({
imports: [
],
standalone: true,
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 { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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
.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
@Component({
imports: [
],
standalone: true,
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 { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
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.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component } from '@angular/core';
@Component({
imports: [
],
standalone: true,
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 { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));