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

    EXAMPLE
    TS
    HTML
    CSS

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

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

    npm install igniteui-webcomponents
    cmd

    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);
    ts

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

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

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

    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;

    Ignite UI for Web Components | CTA Banner

    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;
    }
    css

    EXAMPLE
    TS
    HTML
    index.css
    RippleColorStyles.css

    API References

    Additional Resources