React MUI Badge Display

Last Updated : 14 Nov, 2022

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Badge Display. A badge displays a small badge to the top-right of its child element. A badge can have multiple colors and consists of maximum value, alignment, and overlap properties also.

React MUI Badge Props:

anchorOrigin: It denotes the anchor of a badge.
badgeContent: It contains the content rendered inside the badge.
children: The badge will be added relative to this node.
classes: It overrides or extends the styles applied to the component
color: it is the color of the component.
component: It is the component used for the root node.
components: it is the components used for each slot inside the Badge
componentsProps: These are the props used for each slot inside the Badge.
invisible: If true, the badge is invisible.
max: It shows the max value.
overlap: Wrapped shape of the badge should overlap.
showZero: It controls whether the badge is hidden when badgeContent is zero.
slotProps: The props used for each slot inside the Badge.
slots: The components used for each slot inside the Badge.
sx: The system prop that allows defining system overrides as well as additional CSS styles
variant: The variant to use.

Syntax:

<Badge badgeContent={4} color="primary">
    <Icon color="action" />
</Badge>

Creating React Project:

Step 1: To create a react app, you need to install react modules through npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

Step to Run Application:

npm start

Example 1: Below example demonstrates the React MUI badges of different colors and alignments.

Javascript

import React from "react"; 
import Badge from "@mui/material/Badge"; 
import Stack from "@mui/material/Stack"; 
import BellIcon from "@mui/icons-material/Notifications"; 
  
function App() { 
    return ( 
        <div> 
            <div style={ 
                { textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Badge Display</h2> 
            </div> 
            <div> 
                <Stack spacing={2} direction="row" 
                    justifyContent="center"> 
                    <Badge 
                        badgeContent={1} 
                        color="primary"
                        anchorOrigin={{ 
                            vertical: "top", 
                            horizontal: "left", 
                        }} 
                    > 
                        <BellIcon color="action" /> 
                    </Badge> 
                    <Badge 
                        badgeContent={2} 
                        color="success"
                        anchorOrigin={{ 
                            vertical: "top", 
                            horizontal: "right", 
                        }} 
                    > 
                        <BellIcon color="action" /> 
                    </Badge> 
                    <Badge 
                        badgeContent={3} 
                        color="secondary"
                        anchorOrigin={{ 
                            vertical: "bottom", 
                            horizontal: "right", 
                        }} 
                    > 
                        <BellIcon color="action" /> 
                    </Badge> 
                    <Badge 
                        badgeContent={4} 
                        color="warning"
                        anchorOrigin={{ 
                            vertical: "bottom", 
                            horizontal: "right", 
                        }} 
                    > 
                        <BellIcon color="action" /> 
                    </Badge> 
                </Stack> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

Output:

Example 2: Below example demonstrates the React MUI overlap of badges with max value.

Javascript

import React from "react"; 
import Badge from "@mui/material/Badge"; 
import Stack from "@mui/material/Stack"; 
import MailIcon from "@mui/icons-material/Mail"; 
  
function App() { 
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Badge Display</h2> 
            </div> 
            <div> 
                <Stack spacing={2} direction="row"
                    justifyContent="center"> 
                    <Badge 
                        badgeContent={100} 
                        overlap="circular"
                        color="primary"
                    > 
                        <MailIcon color="action" /> 
                    </Badge> 
                    <Badge 
                        badgeContent={1000} max={999} 
                        color="success"
                    > 
                        <MailIcon color="action" /> 
                    </Badge> 
                </Stack> 
            </div> 
        </div> 
    ); 
} 
  
export default App;