ionic-frameworkionic4

How do I disable/remove ion-ripple effect in ion-button Ioinic 4?


I need to disable the default ion-ripple-effect in the `ion-button'.

<ion-button>
  <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>

enter image description here

I can't disable the pointer-events as I need it.

PS: I've referred the following posts and could not find a proper solution for Ionic 4.

  1. How to remove click effect of an ion-item
  2. Disable ripple effect on element

Solution

  • --ripple-color CSS variable could be used to turn off the ripple effect.

     <ion-button class="no-ripple">
       <ion-icon slot="icon-only" name="trash"></ion-icon>
     </ion-button>
    

    For example, we could set --ripple-color: transparent on the button, to effectively disable the effect.

    .no-ripple {
      --ripple-color: transparent;
    }
    

    Refer https://github.com/ionic-team/ionic/issues/19648