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>neveropen</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>neveropen</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/
