How to Style the MUI Badge: Background Color, Centering, and Size

The MUI Badge component requires knowledge of MUI default classes in order to properly style the component. In particular, you will need to create a nested selector that targets the MuiBadge-badge class in order to apply background color, centering, and sizing to the visible portion of the Badge component.

Below is the Badge that we will create in this tutorial. It is centered on an outlined variant Button.

Full code is in the Resources section.

Style and Position the MUI Badge

The MUI Badge renders as two spans. One wraps the component that the Badge is anchored to, and the other is inside the wrapping span and renders as the ‘visible’ portion of the Badge.

Here’s a screenshot of the DOM:

How to Customize MUI Badge Background Color

Initially I attempted adding color and background color values directly at the root level of the Badge:

<Badge sx={{color: 'yellow', backgroundColor: '#686868'}} />

This didn’t work because it filled some of the Button variants with a background color!

After exploring the DOM and realizing I needed to target the span that visibly rendered the Badge, I created a nested selector. It targets the badge class that is rendered by default by MUI:

const badgeStyle = {
  "& .MuiBadge-badge": {
    color: 'yellow',
    backgroundColor: '#686868',
  }
}

<Badge sx={badgeStyle} badgeContent="GB" />

Targeting the span with MuiBadge-badge fills only the Badge background:

How to Change MUI Badge Size

The Badge can have a custom width and height by targeting the MUIBadge-badge class again:

onst badgeStyle = {
  "& .MuiBadge-badge": {
    width: 35,
    height: 25,
    borderRadius: '50%'
  }
}

You will likely want the width to be greater than the height so there is room for the contents of the Badge. You also don’t want the Badge to be too tall or else it might get cut off. See this example of how to fix overflow when the Badge is on a Tab.

Don’t forget to add border radius to make the Badge more circular. If the width is greater than the height, border radius of 50% will make it a nice oval shape.

How to Center the MUI Badge

If the anchor component (the Button in my example) is a fixed width, you can center the Badge with the code below. The position value needs to be one-half of the anchor component’s width.

const badgeStyle = {
  "& .MuiBadge-badge": {
    right: `${position}px`,
  }
}

If you are positioning the Badge in a different corner than the top-right, you might need to use the left value.

Centering the Badge in a dynamic way based on the anchor component width requires useEffect, useRef, and useState. We capture the width of the ref component, store the value in the state value, and call useEffect to update the value on changes of the ref size.

This is perfect for responsive layouts. Use the same styling code as above, and add these hooks:

const badgeRef = useRef<HTMLInputElement>(null);
const [position, setPosition] = useState(0);

useEffect(() => {
  setPosition(badgeRef.current? (badgeRef.current.getBoundingClientRect().width/2): 0);
}, [badgeRef]);

Positioning the Badge is similar to positioning the Tooltip and positioning the Select menu.

Resources and Related Links

Here’s how to add click events to the Badge.

Here’s the full React code that applies all three stylings:

import { useEffect, useRef, useState } from "react";
import Badge from "@mui/material/Badge";
import Button from "@mui/material/Button";


export default function CustomStyledBadge() {
    const badgeRef = useRef<HTMLInputElement>(null);
    const [position, setPosition] = useState(0);

    useEffect(() => {
        setPosition(badgeRef.current? (badgeRef.current.getBoundingClientRect().width/2): 0);
      }, [badgeRef]);

    const badgeStyle = {
        "& .MuiBadge-badge": {
            color: 'yellow',
            backgroundColor: '#686868',
            right: `${position}px`,
            width: 35,
            height: 25,
            borderRadius: '50%'
        }
    }

  return (
    <Badge sx={badgeStyle} badgeContent="GB" ref={badgeRef}><Button variant='outlined'>Gotta Badge?</Button></Badge>
  );
}

MUI Badge Docs