JavaScript (ES5)

Search results

Types in JavaScript (ES5) Badge control

06 Jun 2023 / 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

index.js

index.html

<!DOCTYPE html><html lang="en"><head>
            
    <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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-layouts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <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>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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

index.js

index.html

<!DOCTYPE html><html lang="en"><head>
            
    <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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <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>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Pill

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

Source

Preview

index.js

index.html

<!DOCTYPE html><html lang="en"><head>
            
    <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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element">
            <h1>Badge Component <span class="e-badge e-badge-primary e-badge-pill">New</span></h1>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

Source

Preview

index.js

index.html

<!DOCTYPE html><html lang="en"><head>
            
    <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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element">
            <div style="display: inline-block; margin-top: 15px;">
                <a href="#" class="e-badge e-badge-primary">Link Badge</a>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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

index.js

index.html

<!DOCTYPE html><html lang="en"><head>
            
    <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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <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>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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

index.js

index.html

<!DOCTYPE html><html lang="en"><head>
            
    <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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <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>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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

index.js

index.html

<!DOCTYPE html><html lang="en"><head>
            
    <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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <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>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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

index.js

index.html

<!DOCTYPE html><html lang="en"><head>
            
    <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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <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>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Contents

Badge styles
Badge types
Circle
Pill
Link
Notification
Dot
Overlap
Position

Contents

Badge styles
Badge types
Circle
Pill
Link
Notification
Dot
Overlap
Position