Search results

Getting started with JavaScript Badge control

17 Mar 2023 / 2 minutes to read

The following section explains how to create a simple badge component using styles and badge’s basic usage.


Install the following required dependent package to render the Badge component.

Copied to clipboard
|-- @syncfusion/ej2-notifications

Set up your development environment

To get started with a badge component, clone the Essential JS 2 quickstart project, and install the packages by using the following commands.

Copied to clipboard
git clone quickstart
cd quickstart
npm install

By default, the project is configured with all the Essential JS 2 dependencies. As the badge component is a pure CSS component, do not configure the src/system.config.js file. You can remove that file.

Include badge theme file

The badge CSS files are available in the ej2-notifications package folder. This can be referenced in your application using the following code.


Copied to clipboard
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-notifications/styles/material.css';

We can also use CRG to generate combined component styles.

Add badge into application

Add an HTML span element with e-badge class inside any wrapper element (h1) into your index.html.


Copied to clipboard
<h1>Badge Component <span class="e-badge">New</span></h1>

Run the application

Run the application in the browser using the following command.

Copied to clipboard
npm start

The following example shows a basic badge component.

Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <title>Essential JS 2 for Badge </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for Badge UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>

    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'>
            <h1>Badge Component <span class="e-badge e-badge-primary">New</span></h1>


See Also

Types of Badge