Search results

How To

The badge is a completely customizable and integral component, and this section shows how to customize and integrate badges with other components.

Customize badges

Colour customization

Even though badges come with 8 predefined colors, you can also customize the colour of the badge as desired.

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

<body>
    
    <div id="container">
        <div id="element">
            <h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill green">New</span></h1>
            <h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill bue">New</span></h1>
            <h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill purple">New</span></h1>
            <h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill gradient">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>

Customize badge size

Badges are designed to change its size based on the content. To change the size of a badge, adjust the font size of the badge.

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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet">
    
    
<script src="//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 size_1">New</span></h1>
            <h1>Badge Component <span class="e-badge e-badge-primary size_2">New</span></h1>
            <h1>Badge Component <span class="e-badge e-badge-primary size_3">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>

Custom position

Even though the badges support the conventional top and bottom positions, the position of the badges can be changed as desired. This can be done by adding a custom class to the badge element to override the default position applied from the source.

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

<body>
    
    <div id="container">
        <div id="element">
            <div style="width: 200px;margin: 10px auto;">
                <div class="badge-block">
                    <div class="whatsapp svg_icons"></div>
                    <!-- Warning Colored Notification Badge -->
                    <span class="e-badge e-badge-warning e-badge-notification e-badge-overlap leftTop">99+</span>
                </div>

                <div class="badge-block">
                    <div class="facebook svg_icons"></div>
                    <!-- Danger Colored Notification Badge -->
                    <span class="e-badge e-badge-danger e-badge-notification e-badge-overlap leftTop">99+</span>
                </div>

                <div class="badge-block">
                    <div class="skype svg_icons"></div>
                    <!-- Secondary Colored Notification Badge -->
                    <span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap leftTop">18</span>
                </div>
            </div>
            <div style="width: 200px;margin: 10px auto;">
                <div class="badge-block">
                    <div class="whatsapp svg_icons"></div>
                    <!-- Warning Colored Notification Badge -->
                    <span class="e-badge e-badge-warning e-badge-notification e-badge-overlap leftBottom">99+</span>
                </div>

                <div class="badge-block">
                    <div class="facebook svg_icons"></div>
                    <!-- Danger Colored Notification Badge -->
                    <span class="e-badge e-badge-danger e-badge-notification e-badge-overlap leftBottom">99+</span>
                </div>

                <div class="badge-block">
                    <div class="skype svg_icons"></div>
                    <!-- Secondary Colored Notification Badge -->
                    <span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap leftBottom">18</span>
                </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>

Integration

Listview

The badges can be integrated with the listview component to indicate new notification with colour based on priority.

In the following sample, default badges are used and there is no need to customize the badge size. The component will automatically adjust the size based on the container element.

Source
Preview
index.js
index.html
// Datasource for listview, badge field is the class data for Badges
var dataSource = [
    { id: 'p_01', text: 'Primary', messages: '3 New', badge: 'e-badge e-badge-primary', icons: 'primary', type: 'Primary' },
    { id: 'p_02', text: 'Social', messages: '27 New', badge: 'e-badge e-badge-secondary', icons: 'social', type: 'Primary' },
    { id: 'p_03', text: 'Promotions', messages: '7 New', badge: 'e-badge e-badge-success', icons: 'promotion', type: 'Primary' },
    { id: 'p_04', text: 'Updates', messages: '13 New', badge: 'e-badge e-badge-info', icons: 'updates', type: 'Primary' },
    { id: 'p_05', text: 'Starred', messages: '', badge: '', icons: 'starred', type: 'All Labels' },
    { id: 'p_06', text: 'Important', messages: '2 New', badge: 'e-badge e-badge-danger', icons: 'important', type: 'All Labels' },
    { id: 'p_07', text: 'Sent', messages: '', badge: '', icons: 'sent', type: 'All Labels' },
    { id: 'p_08', text: 'Outbox', messages: '', badge: '', icons: 'outbox', type: 'All Labels' },
    { id: 'p_09', text: 'Drafts', messages: '7 New', badge: 'e-badge e-badge-warning', icons: 'draft', type: 'All Labels' },
];

var list = new ej.lists.ListView({
    // Bind listview datasource
    dataSource: dataSource,
    // Assign header title
    headerTitle: 'Inbox',
    // Enable header
    showHeader: true,
    // Assign template
    template: '<div class="listWrapper" style="width: inherit;height: inherit;"><span class="${icons} list_svg">&nbsp;</span>' +
        '<span class="list_text">${text} </span>' +
        '<span class="${badge}" style="float: right;margin-top: 16px;font-size: 12px;">${messages}</span></div>',

    // Map fields
    fields: { groupBy: 'type' },
    // Bind actioncomplete event
    actionComplete: () => {
        var list = document.getElementById('lists').getElementsByClassName('e-list-group-item')[0];
        list.style.display = 'none';
    }
});
list.appendTo('#lists');
<!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-lists/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element">
            <div class="sample_container badge-list">
                <!-- Listview element -->
                <div id="lists"></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>

Dynamic Content

Badges in real-time needs to be updated dynamically based on the requirements. The following sample demonstrates how to update the badges content dynamically. Click the increment button to change the badge value.

Source
Preview
index.js
index.html
// Datasource for listview, badge field is the class data for Badges
var dataSource = [
    { id: 'p_01', text: 'Primary', messages: '3 New', badge: 'e-badge e-badge-primary', icons: 'primary', type: 'Primary' },
    { id: 'p_02', text: 'Social', messages: '27 New', badge: 'e-badge e-badge-secondary', icons: 'social', type: 'Primary' },
    { id: 'p_03', text: 'Promotions', messages: '7 New', badge: 'e-badge e-badge-success', icons: 'promotion', type: 'Primary' },
    { id: 'p_04', text: 'Updates', messages: '13 New', badge: 'e-badge e-badge-info', icons: 'updates', type: 'Primary' },
    { id: 'p_05', text: 'Starred', messages: '', badge: '', icons: 'starred', type: 'All Labels' },
    { id: 'p_06', text: 'Important', messages: '2 New', badge: 'e-badge e-badge-danger', icons: 'important', type: 'All Labels' },
    { id: 'p_07', text: 'Sent', messages: '', badge: '', icons: 'sent', type: 'All Labels' },
    { id: 'p_08', text: 'Outbox', messages: '', badge: '', icons: 'outbox', type: 'All Labels' },
    { id: 'p_09', text: 'Drafts', messages: '7 New', badge: 'e-badge e-badge-warning', icons: 'draft', type: 'All Labels' },
];

var list = new ej.lists.ListView({
    // Bind listview datasource
    dataSource: dataSource,
    // Assign header title
    headerTitle: 'Inbox',
    // Enable header
    showHeader: true,
    // Assign template
    template: '<div class="listWrapper" style="width: inherit;height: inherit;"><span class="${icons} list_svg">&nbsp;</span>' +
        '<span class="list_text">${text} </span>' +
        '${if(messages !== "")}<span class="${badge}" style="float: right;margin-top: 16px;font-size: 12px;">${messages}</span>${/if}</div>',

    // Map fields
    fields: { groupBy: 'type' },
    // Bind actioncomplete event
    actionComplete: () => {
        badgeElements = Array.prototype.slice.call(document.getElementById('lists').getElementsByClassName('e-badge'));
    }
});
list.appendTo('#lists');

document.getElementById('button').addEventListener('click', function buttonClick() {
    badgeElements.forEach((element) => {
        element.textContent = (Number(element.textContent.split(' ')[0])) + 1 + ' New';
    })
});
<!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-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element">
            <div class="sample_container badge-list">
                <!-- Listview element -->
                <div id="lists"></div>
                <p class="crossline"></p>
                <span class="incr_button">
                  <button class="e-btn e-primary" id="button">Increment Badge Count</button>
                </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>