React Ripple Overview

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

React Ripple Example

First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

npm install igniteui-react

You will then need to import the IgrRipple, its necessary CSS, and register its module, like so:

import { IgrRippleModule, IgrRipple } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrRippleModule.register();

<IgrButton>
  <IgrRipple></IgrRipple>
  <span>Ripple Button</span>
</IgrButton>

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

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

igc-ripple {
  --color: olive;
}