How to use ion-ripple-effect?



I’m trying to use ionic-ripple-effect in ionic 4 according to the documentation with a div element:

<div style="height: 100px; width: 100%; background: green; position: relative">

However, it does not work (when clicking the div, nothing happens).
When wrapping it inside an ion-item, it does work though.

  <ion-item button>

Does anybody know how to make it work with any element? Thank you!


Could you try to add ion-activatable to your div and check if that solve the issue?

<div ion-activatable ....>

if not, :frowning:
if yes, maybe it would be good then to add a request for docs improvements in because I see that this is not displayed in the doc


Thank you, this works! I’ll write a request for doc improvements then


I had to use

<div class="ion-activatable" ....>



As of v4.0.0, this is still the case … using class="ion-activatable" i mean.

You may also need to set position: relative on the element containing ion-ripple-effect. And also keep in mind you may want to play with overflow as well to determine how the ripple behaves.


Can I ask if you try to simulate a button on a div with click event?


Just in case; as it took me a while again to make ripple effect working, the key is to not forget to add ion-activatable as style class.

Not ok:

        <ion-icon name="close"></ion-icon>


<button class="ion-activatable">
        <ion-icon name="close"></ion-icon>