How do I disable/remove ion-ripple effect in ion-button Ioinic 4?
Just set mode to iOS
<ion-button mode='ios'>
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.
--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