The mdcRipple directive creates a configurable ripple surface.

Ripple Demo

Ripple - Interact with me!
Unbounded Ripple - Interact with me!


Directive: MdcRippleDirective

Selector: [mdcRipple]

Directive for making an element a ripple surface. The ripple can be customized with the provided Sass Mixins. Alternatively you can set the surface to get a default styled ripple.


Set this input to false to remove the ripple effect from the surface.


When this input has a value other than false, the ripple is unbounded. Surfaces for bounded ripples should have overflow set to hidden, while surfaces for unbounded ripples should have it set to visible.

string | number

This input sets the dimension of the ripple. This input can be set to null for returning to the defaults, which uses the surface element to compute the bounds of the ripple.


This input can be used to programmatically enable/disable the ripple. When true, the ripple effect will be disabled, when false the ripple effect will be enabled. When not set, or null (default) the ripple effect enabled/disabled state depend on whether or not the surface element has the disabled attribute set.


When this input has a value other than false, the ripple element will get the "mdc-ripple-surface" class. That class has styling for bounded and unbounded ripples in accordance with your theme customizations. Without this property, you have to supply your own ripple styles, using the provided Sass Mixins.