Blazor Ripple Overview

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

    Blazor Ripple Example


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

    // in Program.cs file

    You will also need to link an additional CSS file to apply the styling to the IgbRipple component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    <IgbButton Variant="@ButtonVariant.Contained">
        Ripple Button

    You can add the IgbRipple 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;

    API References

    Additional Resources