How to disable IconButton ripple effect in Material UI?

Question

I am having a AppBar with IconButton in it. While hovering the button it shows a oval hover in it . I tried to disable it by giving

disableFocusRipple={true}

But it doesnt works.Please help me with that.

Answer 1

You might use the property disableRipple. if true it will disable the ripple effect. disableFocusRipple only works when disableRipple is true. But you have a price on that. You loose some state styles. Take a look at the API docs. https://material-ui.com/api/button/

Answer 2

For some reason none of the disableRipple properties has worked for me, but I was able to disable ripple effect on an IconButton by just making its hover background colour transparent.

Code:

<IconButton className={classes.disableRipple} aria-label="View">
  <InfoIcon/>
</IconButton>

Then just style it like so (or any other way you want to style it, can be inline):

const useStyles = makeStyles(() => ({
  disableRipple: {
    '&:hover': {
      backgroundColor: 'transparent',
    },
  },
}));