Integrate Avatar into Badge in React Avatar component
7 Oct 202524 minutes to read
The badge component serves as a dependent and supportive element that can be integrated with avatars to create notification avatars. This combination displays user profiles alongside status indicators, message counts, or alert notifications.
Implementation
The default Avatar (e-avatar) and circle Avatar (e-avatar-circle) classes work seamlessly with notification badges (e-badge-notification) to create these enhanced user interface elements.
import * as React from "react";
import * as ReactDOM from "react-dom";
import './index.css';
function ReactApp() {
return (<div>
<div className="sample_container avatar-badge">
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
<div className="avatar-sub-block">
{/* xSmall Avatar */}
<div className="e-avatar e-avatar-xsmall">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic"/>
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">6</span>
</div>
<div className="avatar-sub-block">
{/* Small Avatar */}
<div className="e-avatar e-avatar-small">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic"/>
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">12</span>
</div>
<div className="avatar-sub-block">
{/* Avatar */}
<div className="e-avatar">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic"/>
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">46</span>
</div>
<div className="avatar-sub-block">
{/* Large Avatar */}
<div className="e-avatar e-avatar-large">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic"/>
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">82</span>
</div>
<div className="avatar-sub-block">
{/* xLarge Avatar */}
<div className="e-avatar e-avatar-xlarge">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic"/>
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">99+</span>
</div>
</div>
</div>
</div>
<div className="circleAvatar avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
<div className="avatar-sub-block">
{/* xSmall Circle Avatar */}
<div className="e-avatar e-avatar-circle e-avatar-xsmall">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic"/>
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">6</span>
</div>
<div className="avatar-sub-block">
{/* Small Circle Avatar */}
<div className="e-avatar e-avatar-circle e-avatar-small">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic"/>
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">12</span>
</div>
<div className="avatar-sub-block">
{/* Circle Avatar */}
<div className="e-avatar e-avatar-circle">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic"/>
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">46</span>
</div>
<div className="avatar-sub-block">
{/* Large Circle Avatar */}
<div className="e-avatar e-avatar-circle e-avatar-large">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic"/>
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">82</span>
</div>
<div className="avatar-sub-block">
{/* xLarge Circle Avatar */}
<div className="e-avatar e-avatar-circle e-avatar-xlarge">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic"/>
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">99+</span>
</div>
</div>
</div>
</div>
</div>
</div>);
}
export default ReactApp;
ReactDOM.render(<ReactApp />, document.getElementById("element"));import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
return (
<div>
<div className="sample_container avatar-badge">
<div className="avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
<div className="avatar-sub-block">
{/* xSmall Avatar */}
<div className="e-avatar e-avatar-xsmall">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic" />
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">6</span>
</div>
<div className="avatar-sub-block">
{/* Small Avatar */}
<div className="e-avatar e-avatar-small">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic" />
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">12</span>
</div>
<div className="avatar-sub-block">
{/* Avatar */}
<div className="e-avatar">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic" />
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">46</span>
</div>
<div className="avatar-sub-block">
{/* Large Avatar */}
<div className="e-avatar e-avatar-large">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic" />
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">82</span>
</div>
<div className="avatar-sub-block">
{/* xLarge Avatar */}
<div className="e-avatar e-avatar-xlarge">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic" />
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">99+</span>
</div>
</div>
</div>
</div>
<div className="circleAvatar avatar-block">
{/* Card Component */}
<div className="e-card e-avatar-showcase">
<div className="e-card-content">
<div className="avatar-sub-block">
{/* xSmall Circle Avatar */}
<div className="e-avatar e-avatar-circle e-avatar-xsmall">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic" />
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">6</span>
</div>
<div className="avatar-sub-block">
{/* Small Circle Avatar */}
<div className="e-avatar e-avatar-circle e-avatar-small">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic" />
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification e-badge-circle">12</span>
</div>
<div className="avatar-sub-block">
{/* Circle Avatar */}
<div className="e-avatar e-avatar-circle">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic" />
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">46</span>
</div>
<div className="avatar-sub-block">
{/* Large Circle Avatar */}
<div className="e-avatar e-avatar-circle e-avatar-large">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic" />
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">82</span>
</div>
<div className="avatar-sub-block">
{/* xLarge Circle Avatar */}
<div className="e-avatar e-avatar-circle e-avatar-xlarge">
<img src="https://ej2.syncfusion.com/demos/src/grid/images/2.png" alt="profile_pic" />
</div>
{/* Notification Badge */}
<span className="e-badge e-badge-primary e-badge-overlap e-badge-notification">99+</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default ReactApp;
ReactDOM.render(<ReactApp/>, document.getElementById("element"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Avatar 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/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/31.2.12/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">
<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: block;
margin: auto;
border-radius: 3px;
justify-content: center;
}
.sample_container.avatar-badge .avatar-sub-block {
display: inline-block;
position: relative;
margin: 7px
}
.sample_container.avatar-badge .avatar-block {
display: inline-block;
vertical-align: top;
}
/* Media Queries for various devices */
@media only screen and (max-width: 965px) {
.sample_container.avatar-badge {
max-width: 332px;
margin: auto;
margin-top: 0;
}
.circleAvatar {
margin-top: 15px;
}
.e-avatar-showcase.e-card {
width: 320px;
}
}
@media only screen and (min-width: 965px) {
.sample_container.avatar-badge {
max-width: 825px;
margin: auto;
margin-top: 70px;
}
.e-avatar-showcase.e-card {
width: 400px;
}
}
.e-avatar.image {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* Card Customization */
.e-avatar-showcase.e-card {
height: 140px;
padding: 4px;
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-avatar-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-avatar-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-avatar-showcase.e-card .e-card-header .e-card-sub-title p {
margin: 0;
}
.e-avatar-showcase.e-card .e-card-content {
align-self: center;
padding: 10px 11px 10px 0px;
color: rgba(0, 0, 0, 0.75);
overflow: visible;
}