The ripple effect component adds the Material Design ink ripple interaction effect. This component can only be used inside of an
<ion-app> and can be added inside of any element.
It's important to set relative positioning on the parent element because the ripple effect is absolutely positioned and will cover its closest parent that has relative positioning. The parent element should also be given the
ion-activatable class, which tells the ripple effect that the element is clickable. It's recommended to add
overflow: hidden to the parent element if the ripple is overflowing its container.
There are two types of ripple effects:
"unbounded". The default type,
"bounded", will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to
The ripple can be customized to a different color through CSS. By default the ripple color is set to inherit the text color, which is generally the body color. This can be changed by setting the CSS
color on the parent or the ripple effect itself.
|Sets the type of ripple-effect:
bounded: the ripple effect expands from the user's click position -
unbounded: the ripple effect expands from the center of the button and overflows the container.
NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.
"bounded" ｜ "unbounded"
No events available for this component.
|Adds the ripple effect to the parent element.
addRipple(x: number, y: number) => Promise<() => void>
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
No slots available for this component.