React MUI Badge Display

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;

Output:

Reference: https://mui.com/material-ui/react-badge/