Skip to content

Ripple Specification

Stanimir Dimitrov edited this page May 12, 2017 · 1 revision

igxRipple directive should define an area which indicates user action with ripple animation.


Ripple should be activated when the host element of the igxRipple directive receives a mouse or touch event. On mousedown/touchstart the ripple animation starts.

User Stories


As a developer I want to be able to provide a way to apply ripple effect to certain element.

<span igxButton="raised" igxRipple="#e41c77" igxRippleCentered="true">
    <i class="material-icons">edit</i>

End user

The ripple should provide a way to show user interactions.

Acceptance criteria

  1. Apply ripple effect to element with target properly.
  2. Manage ripple position.
  3. Manage ripple duration.



  • igxRipple - The color of the ripple animation
  • igxRippleTarget - Set the ripple to activate on a child element inside the parent of the igxRipple. Accepts a CSS selector. Defaults to the parent of the igxRipple.
  • igxRippleCentered - If true, the ripple animation originates from the center of the element rather than the location of the click event.
  • igxRippleDuration - The duration of the ripple animation. Defaults to 600 milliseconds.
Clone this wiki locally