Customization in EJ2 TypeScript Badge control

13 Jan 202519 minutes to read

Color customization

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

<!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="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>
    <style>
        #element {
            display: table;
            width: 560px;
            margin: auto;
            height: 200px;
            border: 1px solid #dddddd;
            border-radius: 3px;
            justify-content: center;
            position: relative;
            top: 55px;
        }

        h1 {
            text-align: center;
        }

        #element .e-badge.green {
            background: #329378;
            color: #fff;
        }

        #element .e-badge.blue {
            background: #5f65b8;
            color: #fff;
        }

        #element .e-badge.gradient {
            background: #4776E6;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to top, #8E54E9, #4776E6);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to top, #8E54E9, #4776E6);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            color: #fff;
        }

        #element .e-badge.purple {
            background: #9a428f;
            color: #fff;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

Customize badge size

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

<!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="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'>
            <h1>Badge control <span class="e-badge e-badge-primary size_1">New</span></h1>
            <h1>Badge control <span class="e-badge e-badge-primary size_2">New</span></h1>
            <h1>Badge control <span class="e-badge e-badge-primary size_3">New</span></h1>
        </div>
    </div>
    <style>
        #element {
            display: block;
            width: 400px;
            margin: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
            justify-content: center;
        }

        h1 {
            text-align: center;
        }

        .e-badge.size_1 {
            font-size: 12px;
        }

        .e-badge.size_2 {
            font-size: 16px;
        }

        .e-badge.size_3 {
            font-size: 18px;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

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.

<!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="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>
    <style>
        #element {
            display: flex;
            width: 500px;
            margin: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
            justify-content: center;
            position: relative;
            top: 130px;
        }

        .badge-block {
            position: relative;
            display: inline-block;
            margin: 10px 13px 10px 10px;
        }

        .badge-block .e-badge.leftBottom {
            transform: translateX(-150%) translateY(200%);
        }

        .badge-block .e-badge.leftTop {
            transform: translateX(-150%);
        }

        /* SVG Icons */
        .facebook {
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cdefs%3e%3cstyle%3e.cls-1%7bfill:%233c5a99;%7d.cls-2%7bfill:%23fff;%7d%3c/style%3e%3c/defs%3e%3ctitle%3eIcon%3c/title%3e%3crect class='cls-1' x='1' y='1' width='28' height='28' rx='5.75' ry='5.75'/%3e%3cpath class='cls-2' d='M22.53,8.7h2.58V4.64H21.24a5.25,5.25,0,0,0-4,2s-1.06,1-1.08,3.92h0v3H12.36v4.31h3.82V29h4.41V17.86h3.8l.53-4.31H20.59v-3h0A1.78,1.78,0,0,1,22.53,8.7Z'/%3e%3c/svg%3e");
        }

        .skype {
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cdefs%3e%3cstyle%3e.cls-1%7bfill:%2331c4ed;%7d.cls-2%7bfill:%23fff;fill-rule:evenodd;%7d%3c/style%3e%3c/defs%3e%3ctitle%3eIcon%3c/title%3e%3crect class='cls-1' x='1' y='1' width='28' height='28' rx='5.75' ry='5.75'/%3e%3cpath class='cls-2' d='M19.5,19.14a4,4,0,0,1-1.75,1.31,7.22,7.22,0,0,1-2.68.46A6.6,6.6,0,0,1,12,20.27,4,4,0,0,1,10.58,19,2.71,2.71,0,0,1,10,17.51a1.05,1.05,0,0,1,.36-.8,1.28,1.28,0,0,1,.9-.33,1.14,1.14,0,0,1,.75.26,1.89,1.89,0,0,1,.51.73,4.54,4.54,0,0,0,.49.86,2,2,0,0,0,.72.55A3.08,3.08,0,0,0,15,19a3,3,0,0,0,1.73-.45,1.23,1.23,0,0,0,.63-1.06,1,1,0,0,0-.33-.8,2.3,2.3,0,0,0-.92-.49c-.39-.12-.92-.26-1.57-.39a12.2,12.2,0,0,1-2.25-.67,3.64,3.64,0,0,1-1.48-1.06,2.47,2.47,0,0,1-.29-.47,2.84,2.84,0,0,1-.26-1.22,2.71,2.71,0,0,1,.58-1.72,3.71,3.71,0,0,1,1.67-1.14A7.37,7.37,0,0,1,15,9.14a7,7,0,0,1,2,.26,4.38,4.38,0,0,1,1.42.7,3.1,3.1,0,0,1,.84.92,2.11,2.11,0,0,1,.26,1,1.13,1.13,0,0,1-.35.82,1.18,1.18,0,0,1-.88.36,1.09,1.09,0,0,1-.74-.23,2.68,2.68,0,0,1-.51-.67,3,3,0,0,0-.77-.94A2.42,2.42,0,0,0,14.87,11a2.76,2.76,0,0,0-1.49.36,1,1,0,0,0-.53.81.78.78,0,0,0,.17.5,1.63,1.63,0,0,0,.52.38,4.48,4.48,0,0,0,.69.27l.15,0,1,.24c.69.15,1.33.32,1.89.49a6.29,6.29,0,0,1,1.47.67,2.81,2.81,0,0,1,1,1,3,3,0,0,1,.35,1.49,3.15,3.15,0,0,1-.6,1.89Zm4-2.23a7.73,7.73,0,0,0,.2-1.81c0-.22,0-.43,0-.64a8.53,8.53,0,0,0-8.56-7.83,8.72,8.72,0,0,0-1.46.12A5.08,5.08,0,0,0,11,6a5,5,0,0,0-5,4.91,4.83,4.83,0,0,0,.68,2.48,7.33,7.33,0,0,0-.13.94,6.51,6.51,0,0,0,0,.77,8.52,8.52,0,0,0,8.58,8.46,8.9,8.9,0,0,0,1.57-.14A5.09,5.09,0,0,0,19,24a4.94,4.94,0,0,0,5-4.91,4.86,4.86,0,0,0-.52-2.18Z'/%3e%3c/svg%3e");
        }

        .twitter {
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cdefs%3e%3cstyle%3e.cls-1%7bfill:%231da1f2;%7d.cls-2%7bfill:%23fff;%7d%3c/style%3e%3c/defs%3e%3ctitle%3eIcon%3c/title%3e%3crect class='cls-1' x='1' y='1' width='28' height='28' rx='5.75' ry='5.75'/%3e%3cpath class='cls-2' d='M11.67,23.11A11.3,11.3,0,0,0,23.05,11.73c0-.17,0-.35,0-.52a8,8,0,0,0,2-2.07,8,8,0,0,1-2.29.63,4,4,0,0,0,1.75-2.21,8,8,0,0,1-2.54,1,4,4,0,0,0-6.81,3.65A11.36,11.36,0,0,1,6.89,8a4,4,0,0,0-.54,2,4,4,0,0,0,1.78,3.33,4,4,0,0,1-1.81-.5v.05a4,4,0,0,0,3.2,3.92,4,4,0,0,1-1,.14,3.67,3.67,0,0,1-.75-.07,4,4,0,0,0,3.74,2.78,8.06,8.06,0,0,1-5,1.71,7.61,7.61,0,0,1-1-.06,11.31,11.31,0,0,0,6.14,1.8'/%3e%3c/svg%3e");
        }

        .whatsapp {
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cdefs%3e%3cstyle%3e.cls-1%7bfill:%2346bf56;%7d.cls-2%7bfill:%23fff;%7d%3c/style%3e%3c/defs%3e%3ctitle%3eIcon%3c/title%3e%3crect class='cls-1' x='1' y='1' width='28' height='28' rx='5.75' ry='5.75'/%3e%3cpath class='cls-2' d='M15.19,4.68A10.21,10.21,0,0,0,6.4,20.12l-1.29,5.2,5.12-1.47a10.23,10.23,0,1,0,5-19.17Zm.11,18.75a8.41,8.41,0,0,1-4.81-1.5l-2.91.85.74-3a8.49,8.49,0,1,1,7,3.66Z'/%3e%3cpath class='cls-2' d='M12.6,14.09l.36-.41c.2-.23.5-.45.51-.78a2.3,2.3,0,0,0-.21-.93c-.07-.19-.15-.37-.22-.56a4,4,0,0,0-.48-1,.94.94,0,0,0-1-.16,2.52,2.52,0,0,0-1.39,2.9,9.09,9.09,0,0,0,7.22,6.56s2.16.31,2.74-1a2.39,2.39,0,0,0,.19-1,.81.81,0,0,0-.48-.63,10.88,10.88,0,0,0-1-.53,1.51,1.51,0,0,0-1-.29,1.64,1.64,0,0,0-.63.51c-.23.25-.47.49-.71.74C16.46,17.49,13.41,16.37,12.6,14.09Z'/%3e%3c/svg%3e");
        }

        .svg_icons {
            width: 32px;
            height: 32px;
            display: inline-block;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}