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

Question

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>

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

Cyclotron

Answer 1

--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

Cyclotron

It doesn't turn off the ripple effect, it just makes it transparent. For example the margins are still there. – Tobey

Yes. That's true. There was no official way to turn it off. This was the sort of recommended solution at that time. Do check the Github issue linked. – Cyclotron

Answer 2

Just set mode to iOS

<ion-button mode='ios'>

Safire

Answer 3

I think it's only included with Android so you can set mode="ios" on the button to avoid that effect.

Yeah so I just checked the source code and it is only used with mode="md" (which is Android / Material Design):

    <TagType
      {...attrs}
      class="button-native"
      disabled={disabled}
      onFocus={this.onFocus}
      onBlur={this.onBlur}
    >
      <span class="button-inner">
        <slot name="icon-only"></slot>
        <slot name="start"></slot>
        <slot></slot>
        <slot name="end"></slot>
      </span>
      {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
    </TagType>

That is the only way to do it using the button itself, the rippleType only offers bounded or unbounded, not a way to disable it.

I'm not sure if the ion-ripple-effect can be hidden with css because of the web components encapsulation used in Ionic 4.

Bertabertasi

Web components encapsulation makes it tough. However, mode="ios" does the trick. Thanks :D – Cyclotron

cool, please consider marking as answer if you are happy with it, so others don't waste their time visiting and reading resolved questions – Bertabertasi

Answer 4

In current version on Ionic 4, this is working example:

<ion-button class="submit-btn">...</ion-button>

.submit-btn {
    --background: transparent;
    --background-hover: transparent !important;
}

https://ionicframework.com/docs/api/button#css-custom-properties

Estabrook

Answer 5

If you want to disable ripple effects globally, you can adjust your configuration when you import the IonicModule:

import { IonicModule } from '@ionic/angular';

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      rippleEffect: false
    }),
    AppRoutingModule
  ],
  ...
})

Credit to this answer

Janettjanetta