Types in React Badge component

20 Feb 202624 minutes to read

This section details the predefined style variants and shape types available in the Badge component. Understanding these options helps you select the appropriate badge for your use case and ensures consistent UI patterns throughout your application.

Badge style variants

The Syncfusion Badge component provides eight predefined color variants using the .e-badge class. Each variant serves a specific semantic purpose and can be applied to communicate different states or message types to users.

Class Name	Description
e-badge-primary	Indicates primary or default state; use for general notifications.
e-badge-secondary	Indicates secondary actions or supplementary information.
e-badge-success	Indicates successful completion, confirmation, or positive outcomes.
e-badge-danger	Indicates errors, warnings, or critical issues requiring immediate attention.
e-badge-warning	Indicates caution or potential issues that need review.
e-badge-info	Indicates informational messages or helpful guidance.
e-badge-light	Represents a light theme variant for subtle notifications on dark backgrounds.
e-badge-dark	Represents a dark theme variant for prominent notifications on light backgrounds.

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
function App() {
    return (<div className="sample_container">
        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <div>
                        <span className="e-badge e-badge-primary">Primary</span>
                    </div>
                </div>
                <div className="e-card-content">
                    <div>
                        <code>.e-badge-primary</code>
                    </div>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-secondary">Secondary</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-secondary</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-success">Success</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-success</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-danger">Danger</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-danger</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-warning">Warning</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-warning</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-info">Info</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-info</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-light">Light</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-light</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-dark">Dark</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-dark</code>
                </div>
            </div>
        </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
    <div className="sample_container">
        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <div>
                        <span className="e-badge e-badge-primary">Primary</span>
                    </div>
                </div>
                <div className="e-card-content">
                    <div>
                        <code>.e-badge-primary</code>
                    </div>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-secondary">Secondary</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-secondary</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-success">Success</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-success</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-danger">Danger</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-danger</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-warning">Warning</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-warning</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-info">Info</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-info</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-light">Light</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-light</code>
                </div>
            </div>
        </div>

        <div className="block">
            <div className="e-card e-badge-showcase">
                <div className="e-card-content">
                    <span className="e-badge e-badge-dark">Dark</span>
                </div>
                <div className="e-card-content">
                    <code>.e-badge-dark</code>
                </div>
            </div>
        </div>
    </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Badge Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</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%;
}

#element {
    width: 100%;
    margin: auto;
}

.sample_container {
    width: 800px;
    margin: auto;
}

.block {
    margin: 10px 10px 10px 10px;
    vertical-align: top;
    display:inline-block;
}

.e-badge-showcase.e-card {
    width: 150px;
    height: 90px;
    padding: 5px;
    margin: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-radius: 8px;
}

.e-badge-showcase.e-card .e-card-header .e-card-header-title {
    align-self: center;
    font-size: 18px;
    letter-spacing: 1px;
    text-shadow: #eaeaea 1px 1px 2px;
}

.e-badge-showcase.e-card .e-card-header .e-card-sub-title {
    color: rgba(0, 0, 0, 0.75);
    white-space: pre-line;
    font-size: 14px;
    text-shadow: #eaeaea 1px 1px 2px
}

.e-badge-showcase.e-card .e-card-header .e-card-sub-title p {
    margin: 0;
}

.e-badge-showcase.e-card .e-card-content {
    align-self: center;
    padding: 0 0 10px 0;
}

.e-badge-showcase.e-card .e-card-content .e-badge {
    font-size: 12px;
}

Badge shape types

The Syncfusion Badge component supports the following shape and layout types to suit different design patterns and use cases:

Circle
Pill
Link
Notification
Dot
Overlap
Position

Circle

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

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import './index.css'
function App() {
    return (<div>
        <div className="badge-block">
            <div className="skype svg_icons"></div>
            <span className="e-badge e-badge-success e-badge-overlap e-badge-notification e-badge-circle">18</span>
        </div>

        <div className="badge-block">
            <div className="twitter svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">9</span>
        </div>

        <div className="badge-block">
            <div className="facebook svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">2</span>
        </div>

        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-notification e-badge-circle">35</span>
        </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
    <div>
        <div className="badge-block">
            <div className="skype svg_icons"></div>
            <span className="e-badge e-badge-success e-badge-overlap e-badge-notification e-badge-circle">18</span>
        </div>

        <div className="badge-block">
            <div className="twitter svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">9</span>
        </div>

        <div className="badge-block">
            <div className="facebook svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">2</span>
        </div>

        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-notification e-badge-circle">35</span>
        </div>
    </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Badge Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</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%;
}

#element {
  display: flex;
  width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
  justify-content: center;
  position: relative;
  top: 130px;
}

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

.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");
}

.firefox {
  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;
}

Pill

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

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
function App() {
    return (<h1>Badge Component <span className="e-badge e-badge-primary e-badge-pill">New</span></h1>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
    <h1>Badge Component <span className="e-badge e-badge-primary e-badge-pill">New</span></h1>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Badge Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</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%;
}

#element {
    display: flex;
    width: 400px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
    justify-content: center;
    position: relative;
    top: 130px;
}

Link

When badge modifier classes are applied to an anchor tag, the badge’s appearance will change from its normal state to a hover state on mouseover.

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import './index.css';
function App() {
    return (<div className="badge-block">
        <a href="#" className="e-badge e-badge-primary">Link Badge</a>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
    <div className="badge-block">
        <a href="#" className="e-badge e-badge-primary">Link Badge</a>
    </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Badge Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</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%;
}

#element {
  display: flex;
  width: 400px;
  height: 50px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
  justify-content: center;
  position: relative;
  top: 130px;
}

.badge-block {
  display: inline-block;
  margin-top: 15px;
}

Notification

Apply the .e-badge-notification modifier class to create a notification badge. Notification badges are used to highlight important content or contexts that require immediate attention—such as alert counts or status changes. When using notification badges, ensure the parent element has position: relative to maintain proper positioning.

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import './index.css'
function App() {
    return (<div>
        <div className="badge-block">
            <div className="skype svg_icons"></div>
            <span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
        </div>

        <div className="badge-block">
            <div className="twitter svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
        </div>

        <div className="badge-block">
            <div className="facebook svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
        </div>

        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
        </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
    <div>
        <div className="badge-block">
            <div className="skype svg_icons"></div>
            <span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
        </div>

        <div className="badge-block">
            <div className="twitter svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
        </div>

        <div className="badge-block">
            <div className="facebook svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
        </div>

        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
        </div>
    </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Badge Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</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%;
}

#element {
  display: flex;
  width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
  justify-content: center;
  position: relative;
  top: 130px;
}

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

.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");
}

.firefox {
  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;
}

Dot

Create a minimalist dot badge by adding the .e-badge-dot modifier class. Dot badges convey status or presence information in a compact, non-intrusive manner—ideal for showing online status, activity indicators, or subtle alerts. Like notification badges, set the parent element to position: relative for proper positioning.

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import './index.css';
function App() {
    return (<div>
        <div className="badge-block">
            <div className="skype svg_icons"></div>
            <span className="e-badge e-badge-success e-badge-overlap e-badge-dot"></span>
        </div>

        <div className="badge-block">
            <div className="twitter svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
        </div>

        <div className="badge-block">
            <div className="facebook svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
        </div>

        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-dot"></span>
        </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
    <div>
        <div className="badge-block">
            <div className="skype svg_icons"></div>
            <span className="e-badge e-badge-success e-badge-overlap e-badge-dot"></span>
        </div>

        <div className="badge-block">
            <div className="twitter svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
        </div>

        <div className="badge-block">
            <div className="facebook svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
        </div>

        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-dot"></span>
        </div>
    </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Badge Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</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%;
}

#element {
  display: flex;
  width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
  justify-content: center;
  position: relative;
  top: 130px;
}

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

.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");
}

.firefox {
  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;
}

.svg_icons+.e-badge.e-badge-overlap {
  transform: translateX(-100%);
}

Overlap

Combine the .e-badge-overlap modifier class with notification or dot badges to create an overlapping effect on the target element. This pattern is useful for positioning badges on the edges of avatars, icons, or other UI components while maintaining visual hierarchy. Ensure the parent element has position: relative for correct badge positioning.

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
function App() {
    return (<div>
        <div className="badge-block">
            <div className="skype svg_icons"></div>
            <span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
        </div>

        <div className="badge-block">
            <div className="twitter svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
        </div>

        <div className="badge-block">
            <div className="facebook svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
        </div>

        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
        </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
    <div>
        <div className="badge-block">
            <div className="skype svg_icons"></div>
            <span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
        </div>

        <div className="badge-block">
            <div className="twitter svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
        </div>

        <div className="badge-block">
            <div className="facebook svg_icons"></div>
            <span className="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
        </div>

        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
        </div>
    </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Badge Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</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%;
}

#element {
  display: flex;
  width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
  justify-content: center;
  position: relative;
  top: 130px;
}

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

.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");
}

.firefox {
  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;
}

Position

Notification and dot badges default to top positioning. Change the badge position to the bottom by applying the .e-badge-bottom modifier class. This is particularly useful for avatar components where a bottom position communicates status or availability information more intuitively, as shown in the following example.

index.jsx
index.tsx
index.html
index.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
function App() {
    return (<div>
        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            {/* Success Colored Bottom Dot Badge */}
            <span className="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
        </div>

        <div className="badge-block">
            <div className="skype svg_icons"></div>
            {/* Info Colored Bottom Dot Badge */}
            <span className="e-badge e-badge-info e-badge-overlap e-badge-dot e-badge-bottom"></span>
        </div>

        <div className="badge-block">
            <div className="facebook svg_icons"></div>
            {/* Info Colored Dot Badge */}
            <span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
        </div>

        <div className="badge-block">
            <div className="twitter svg_icons"></div>
            {/* Danger Colored Dot Badge */}
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-dot e-badge-bottom"></span>
        </div>
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
    <div>
        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            {/* Success Colored Bottom Dot Badge */}
            <span className="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
        </div>

        <div className="badge-block">
            <div className="skype svg_icons"></div>
            {/* Info Colored Bottom Dot Badge */}
            <span className="e-badge e-badge-info e-badge-overlap e-badge-dot e-badge-bottom"></span>
        </div>

        <div className="badge-block">
            <div className="facebook svg_icons"></div>
            {/* Info Colored Dot Badge */}
            <span className="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
        </div>

        <div className="badge-block">
            <div className="twitter svg_icons"></div>
            {/* Danger Colored Dot Badge */}
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-dot e-badge-bottom"></span>
        </div>
    </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById("element"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Badge Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-notifications/styles/tailwind3.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</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%;
}

#element {
  display: flex;
  width: 400px;
  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;
}

/* 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");
}

.firefox {
  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");
}

.contact {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='16' fill='#4285f4' rx='16' ry='16'/%3E%3Cpath fill='#FFF' d='M13.55 16.95h4.9c2.7 0 4.85 2.05 4.85 4.6 0 .9-.25 1.75-.75 2.45H9.45c-.5-.7-.75-1.55-.75-2.45 0-2.55 2.15-4.6 4.85-4.6zM16.05 8c2.05 0 3.7 1.65 3.7 3.7 0 2.05-1.65 3.7-3.7 3.7-2.05 0-3.7-1.65-3.7-3.7.05-2.05 1.7-3.7 3.7-3.7z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}

.chrome {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='#ffffff' d='M16.033 11.049a5.155 5.155 0 1 1 0 10.312 5.156 5.156 0 0 1 0-10.312zM16.124 0c1.281-.003 9.659.318 14.268 9.043h-.016l.01.018c.33.578 3.745 6.94-.485 14.969 0 0-4.215 8.107-14.565 7.968l-.452-.012-.004.007-.004.007.02-.037c.564-.98 5.112-8.884 6.357-11.067l.016-.028.007-.008.04-.069.11-.127a7.085 7.085 0 0 0 1.457-2.967l.01-.046.035-.151c.088-.424.148-.944.128-1.549l-.006-.117v-.004l-.007-.143-.006-.07-.005-.079-.012-.116v-.01l-.001-.008-.016-.158a7.2 7.2 0 0 0-.096-.572l-.018-.081-.013-.064a9.801 9.801 0 0 0-.692-2.016c-.165-.243-.332-.489-.512-.733l-.142-.187 8.728-2.554s-10.538-.01-13.018-.001l.021.005H16.642l-.14-.013a7.034 7.034 0 0 0-1.132-.003l-.167.016h-.047l-.034-.001c-.193.002-1.213.045-2.492.764l-.005.003-.033.016a7.158 7.158 0 0 0-3.25 3.533l-.059.148-6.485-6.404s4.74 8.311 6.165 10.779l.065.113.023.088a7.14 7.14 0 0 0 7.777 5.118l.144-.02L14.854 32h-.027c-.667-.005-7.894-.234-12.744-7.906 0 0-4.925-7.698.37-16.573l.252-.411.001-.002C2.822 6.904 6.58.374 15.958.003c0 0 .057-.003.166-.003z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}

.pinterest {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='16' cy='16' fill='#bd081c' rx='16' ry='16'/%3E%3Cpath fill='#FFF' d='M16.22 6.458c4.807-.009 9.028 1.888 9.663 5.307.787 4.256-2.438 8.866-8.213 8.535-1.565-.09-2.222-.666-3.448-1.22-.675 2.628-1.5 5.147-3.942 6.463-.754-3.972 1.107-6.954 1.971-10.12-1.474-1.842.177-5.547 3.284-4.634 3.824 1.123-3.31 6.845 1.48 7.56 5 .746 7.04-6.441 3.94-8.779-4.48-3.376-13.042-.077-11.989 4.755.256 1.181 1.9 1.54.657 3.17-2.868-.471-3.724-2.15-3.614-4.39.178-3.664 4.435-6.229 8.705-6.583.506-.043 1.01-.064 1.507-.064z'/%3E%3C/svg%3E") no-repeat 100% 100%;
}

.svg_icons {
  width: 32px;
  height: 32px;
  display: inline-block;
}

.svg_icons+.e-badge.e-badge-overlap {
  transform: translateX(-100%);
}

Search docs

Ask HelpBot