React MUI Badge API

MUI is a user interface library that provides predefined and customizable React components for faster and easy web development. MUI offers a comprehensive suite of UI tools that help in shipping new features faster. In this article let’s discuss the TablePagination API offered by the MUI library.

Badge generates a small badge to the top-right of its child(ren). We can wrap the Badge component around an icon to show a badge on top of that icon. In this article, we will learn how to import MUI Badge API and its various use cases.

Props List:

• anchorOrigin: This prop basically gives the position (origin) of the badge. Provide horizontal or vertical or both field to determine the final positioning of the badge. For example, anchorOrigin = {{ vertical: ‘top’, horizontal: ‘right’ }} will position the badge at the top right.
• badgeContent: Provide the content that will be rendered within the badge. For instance, to show 4 of unread messages above a message icon we can put badgeContent = { 4 }
• children: The badge will be added relative to this node.
• classes: This prop is used to override or extend the styles applied to the component.
• color: Defines the color of the component. Its values include default, primary, secondary, error, info, success, and warning.  It supports both default and custom theme colors.
• component: This prop gives the type of element used for the root node. The value can be either a string or an HTML element or a component.
• invisible: This prop takes a boolean value. If set to true, the badge will be invisible.
• max: It is the maximum count to be shown.
• overlap: Wrap the badges in a particular shape on the overlap. Values like circular or rectangular can be used.
• showZero: It takes a boolean value. It controls whether to hide the badge when the badgeContent is zero. By default, it is false which means when the badgeContent becomes zero the badge is not shown. When set to true the badge will remain visible with zero.
• variant: It is the badge variant. It can be a dot or a standard variant.
• sx: This is the system prop. This allows us to define additional CSS styles for the component.

Syntax:

<Badge badgeContent={3}>
    Geeksforgeeks
</Badge>

Creating React App and installing module:

Step 1: Initialize the app using create-react-app.

npx create-react-app myApp

Step 2: Get inside the project directory.

cd myApp

Installing MUI: It can be easily installed using package managers such as npm or yarn.

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

or

yarn add @mui/material @emotion/react @emotion/styled

Importing Badge API to the project:

import Badge from '@mui/material/Badge';
// or
import { Badge } from '@mui/material';

Example 1: Let us create a basic badge using Badge API. We will wrap two icons with the Badge. One will show number of unread messages while the other will show number of notifications. We will provide the number using badgeContent prop. We will also use color prop to provide different colors to the badges.

Javascript

import * as React from "react";
import Badge from "@mui/material/Badge";
import Stack from "@mui/material/Stack";
import MailIcon from "@mui/icons-material/Mail";
import NotificationsIcon from
    "@mui/icons-material/Notifications";

export default function ColorBadge() {
    return (
        <Stack spacing={2} direction="row">
            <h1>GeeksForGeeks</h1>
            <Badge badgeContent={4} color="success">
                <MailIcon color="action" />
            </Badge>
            <Badge badgeContent={4} color="error">
                <NotificationsIcon color="action" />
            </Badge>
        </Stack>
    );
}

Output:

basic badge

Example 2: Let us now create more badges and use advanced properties such as visibility of the badge and maximum value. Here we will be using two sets of icons. The first set will contain a message icon which we will use to understand the badge visibility using showZero prop. The other set will contain a notification icon which we will use to understand the max prop to cap the badge content.

Javascript

import * as React from "react";
import Badge from "@mui/material/Badge";
import Stack from "@mui/material/Stack";
import MailIcon from "@mui/icons-material/Mail";
import NotificationsIcon from
    "@mui/icons-material/Notifications";

export default function ColorBadge() {
    return (
        <>
            <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
            <Stack spacing={5} direction="row">
                <Badge badgeContent={0} color="success">
                    <MailIcon color="action" />
                </Badge>
                <Badge badgeContent={0} color="success" showZero>
                    <MailIcon color="action" />
                </Badge>
            </Stack>
            <br />
            <br />
            <Stack spacing={5} direction="row">
                <Badge badgeContent={50} color="error">
                    <NotificationsIcon color="action" />
                </Badge>
                <Badge badgeContent={100} color="error">
                    <NotificationsIcon color="action" />
                </Badge>
                <Badge badgeContent={555} max={500} color="error">
                    <NotificationsIcon color="action" />
                </Badge>
            </Stack>
        </>
    );
}

Output:

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