CODEWITHSUNDEEP
angular15angular-material-15
Kenny vm
Kenny vm

Reputation: 101

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

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.

Upvotes: 8

Views: 5384

Answers (3)

Karol Pawlak
Karol Pawlak

Reputation: 464

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;

Upvotes: 1

Alfonso Tienda
Alfonso Tienda

Reputation: 3689

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

Upvotes: 0

assylias
assylias

Reputation: 328735

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

Upvotes: 2

Related Questions