ToggleButton disableRipple dont work

[Malagutte]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Go to this link with simple toogle buttons with icon example https://codesandbox.io/s/jkdzs4?file=/demo.tsx
2. Set disableRipple in all ToggleButton tags

Current behavior 😯

the ripple effect is still there

Expected behavior 🤔

To remove the ripple effect for the ToggleButton that disableRipple is true

Context 🔦

to disable ripple effect, now I have to style the focus styled class

Your environment 🌎

npx @mui/envinfo

Don't forget to mention which browser you used: Chrome

System: OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish) Binaries: Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.2/bin/yarn npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm Browsers: Chrome: 112.0.5615.165 Firefox: 112.0.1 npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.113 @mui/core-downloads-tracker: 5.11.4 @mui/icons-material: ^5.11.0 => 5.11.0 @mui/material: ^5.11.4 => 5.11.4 @mui/private-theming: 5.11.13 @mui/styled-engine: 5.11.11 @mui/system: 5.11.13 @mui/types: 7.2.3 @mui/utils: 5.11.13 @mui/x-date-pickers: ^5.0.17 => 5.0.17 @types/react: ^18.0.26 => 18.0.26 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.4 => 4.9.4

[PunitSoniME]

I tried to reproduce this scenario and it looks working fine

Can you check this demo and see if disableRipple is working fine or not

[Malagutte]

@PunitSoniME I just checked your demo link, for me the hover effect continues there and should not be there, I am expecting disableRipple like the Button component.

[PunitSoniME]

@Malagutte

I think you are mixing ripple effect with hover styling. disableRipple will remove the effect of wave which you see over the element when you keep your mouse button pressed.

when you hover on element, it applies the hover styles, ripple effect is different and it has nothing to do with the style which you are getting on hover.

Let us wait for another developer's opinion 😃

[mj12albert]

disableRipple works fine for me - I'm quite sure the momentary change in the background color is not the ripple effect and is probably the active state of the button

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.