There isn't any props to disable ion-ripple-effect

[alfredarcifa]

In documentation and in props I can't see any reference to disable the ripple effect.
In the render of the super-tab-button.component I see

render() {
        return (h(Host, { role: "button", "aria-label": this.label ? this.label.innerText : false, "aria-disabled": this.disabled ? 'true' : false, "aria-selected": this.active ? 'true' : 'false', class: {
                'ion-activatable': !this.disabled,
                'ion-focusable': !this.disabled,
                'icon-only': !!this.icon && !this.label,
                'label-only': !!this.label && !this.icon,
                active: Boolean(this.active),
                scrollableContainer: this.scrollableContainer,
            } },
            h("slot", null),
            h("ion-ripple-effect", { type: "unbounded" })));
    }

[ihadeed]

You can't disable it at the moment. Possibly doable with CSS though, you can try force hiding the ripple component.

Will add an option to disable it in later versions

[alfredarcifa]

So, @ihadeed, there is only a solution with "bad practice" in CSS (forcing ::part(..) with not fully compatibility) .
With CSS vars there isn't any solution.

[Avalfr3d]

@ihadeed I'll wait for an option to disable ripple-effect.

It's important for me, thanks.

[anydeer]

Any update of this?

[alfredarcifa]

@DEER90 fix in css

super-tab-button.ion-activatable { color: transparent !important }

I'll wait for params in components.

[anydeer]

@alfredarcifa params would be nice but your fix is also satisfying :) thanks