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.
--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;
}
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.
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