Search results

Types in JavaScript (ES5) Badge control

26 Nov 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
index.js
index.html
Copied to clipboard
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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
Copied to clipboard
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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
Copied to clipboard
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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>

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
Copied to clipboard
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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
Copied to clipboard
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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
Copied to clipboard
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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
Copied to clipboard
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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
Copied to clipboard
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/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>