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 IgcRippleComponent, you need to register it as follows:

    import { defineComponents, IgcRippleComponent } from "igniteui-webcomponents";
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    defineComponents(IgcRippleComponent);
    
    <igc-button>
      <igc-ripple></igc-ripple>
      Ripple Button
    </igc-button>
    

    You can add the IgcRippleComponent 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 Reference

    Additional Web Components that were used:

    Additional Resources