Search code examples
reactjsmaterial-uiuser-experience

How to position Material UI badge near IconButton in ReactJS?


How can I solve the issue of positioning the badge content to be near the IconButton in Material UI ?

I've tried to disableRipple but it doesn't work!

Ugly enter image description here

     <Badge badgeContent={4} color="primary">
          <IconButton
            disableFocusRipple
            disableRipple
            style={{ backgroundColor: "transparent" }}
          >
            <MailIcon />
          </IconButton>
        </Badge>

How I want to appear enter image description here

If I don't use IconButton everything is okay, but I need Icon Button!


Solution

  • Put the IconButton outside of the Badge

     <IconButton style={{ backgroundColor: "transparent" }}>
          <Badge badgeContent={4} color="primary">
               <MailIcon />
          </Badge>
       </IconButton>
    
    

    Result enter image description here