RippleContainer Overview

The Kendo UI RippleContainer widget provides the Material ink ripple effect for the Kendo UI components and is compatible only with the Sass-based Material Theme.

The effect gets applied to all components that are located inside the RippleContainer element.

Getting Started

Initialize the RippleContainer

To initialize the RippleContainer, use the following example.

    <div id="example">
        <button class="k-button">Default Button</button>




By default, the RippleContainer configures the ripple effect to be shown on all supported elements:

  • Buttons
  • Checkboxes
  • Radio Buttons
  • List Items

When the elements options is configured, the ripple effect will show only on the specified elements:

    <div id="container">
        <p>Ripple on Buttons</p>
        <button class="k-button">Default Button</button><br />
            elements: [
                { selector: ".k-button:not(li)" }


Existing Instances

Make a reference to an existing RippleContainer instance via Once done, use the RippleContainer API to control its behavior.

The example below demonstrates how to access an existing ProgressBar instance.

var ripple = $("#container").data("kendoRippleContainer");

See Also

Other articles on Kendo UI RippleContainer:

In this article
Not finding the help you need? Improve this article