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
Usage
First, you need to the install the corresponding Ignite UI for React npm package by running the following command:
npm install igniteui-reactYou will then need to import the IgrRipple and its necessary CSS, like so:
import { IgrRipple } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';The simplest way to start using the IgrRipple is as follows:
<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;
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;
}