Search results

Types in React Badge component

25 Oct 2021 / 6 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.tsx
index.html
App.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
  render() {
       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>
       );
  }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
<!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="//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://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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));

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.tsx
index.html
App.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
  render() {
   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>
   );
  }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
<!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="//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://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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));

Pill

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

Source
Preview
index.tsx
index.html
App.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
  render() {
   return (
    <h1>Badge Component <span className="e-badge e-badge-primary e-badge-pill">New</span></h1>
   );
  }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
<!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="//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://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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        return (<h1>Badge Component <span className="e-badge e-badge-primary e-badge-pill">New</span></h1>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));

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.tsx
index.html
App.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
  render() {
   return (
    <div className="badge-block">
        <a href="#" className="e-badge e-badge-primary">Link Badge</a>
    </div>
   );
  }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
<!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="//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://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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        return (<div className="badge-block">
        <a href="#" className="e-badge e-badge-primary">Link Badge</a>
    </div>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));

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.tsx
index.html
App.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
  render() {
   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>
   );
  }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
<!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="//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://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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));

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.jsx
index.tsx
index.html
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
  render() {
   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>
   );
  }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
<!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="//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://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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</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.tsx
index.html
App.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
  render() {
   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>
   );
  }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
<!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="//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://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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));

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.tsx
index.html
App.jsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}> {
  render() {
   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>
   );
  }
}
ReactDOM.render(<App />, document.getElementById("element"));
Copied to clipboard
<!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="//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://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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        return (<div>
        <div className="badge-block">
            <div className="firefox svg_icons"></div>
            
            <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>
            
            <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>
            
            <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>
            
            <span className="e-badge e-badge-danger e-badge-overlap e-badge-dot e-badge-bottom"></span>
        </div>
    </div>);
    }
}
ReactDOM.render(<App />, document.getElementById("element"));