Web Components Ripple Overview

The Ignite UI for Web Components Ripple component creates an animation in response to a touch or a mouse click.

Web Components Ripple Example

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents

Before using the Ripple, you need to register it as follows:

import { defineComponents, IgcRippleComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRippleComponent);

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to start using the Ripple is as follows:

<igc-button>
  <igc-ripple></igc-ripple>
  Ripple Button
</igc-button>

You can add the Ripple component to any web element as long as its CSS position property is set to any other value than static;

Examples

Color

You can change the color of the ripple by setting the --color CSS property to any valid CSS color:

igc-ripple {
  --color: olive;
}

API References

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub