How to disable Ripple + hover effect from a mat-button in Angular Material 15

Question

I'm using Angular 15 with Material 15 and trying to add a button without ripple effect / any hover effect's.

This used to work in angular material 12:

<button mat-button [disableRipple]="true">DoSomething</button>

But now it's still showing ripple / hover effect's. Is the "disableRipple" input broken?

I can remove this behavior by doing:

.no-hover-effect {
  &.mat-mdc-button {
    ::ng-deep {
      .mat-mdc-button-persistent-ripple, .mat-mdc-button-ripple {
        display: none;
      }
    }
  }
}

But I would like a solution without having to modify the css.

Ribbonfish

Answer 1

It seems to have been fixed in angular 16. See bug report.

Privity

This is great if we ever decide to upgrade our project. Right now our project consist of many small packages. Each package is kind of a mini website. We have 1 app loading these packages. So if we want to use angular 16 we should upgrade all of them to avoid problems. – Ribbonfish

Answer 2

As of Angular 18 and Material 3 none of above worked for me. I finally did it by first disabling ripple:

<button mat-button [disableRipple]="true">
    My button
</button>

And then removing state in styles:

--mat-text-button-state-layer-color: none;

Pouched

That works for me too, however, it disables for the whole project not just for that one button. – Preschool

You're probably using it on some global selector. Make a claas or an id for the element. – Pouched

Answer 3

Hover can't be disabled this way.

try

:host ::ng-deep {
  .mat-checkbox span.mat-checkbox-ripple {
    display: none;
  }
}

Hover is not intended to be disabled, because accesibility:

https://github.com/angular/components/issues/8298#issuecomment-354753835

Morganatic

This is what i posted in my question. So i know this works. But the question is how to do this without creating (css) dependencies on the angular classes. – Ribbonfish

you're right. excuse me. I put the comment from dev that this will not be adressed. – Morganatic