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

    Usage

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

    IgbRippleModule.Register(IgniteUIBlazor);
    

    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
        <IgbRipple></IgbRipple>
    </IgbButton>
    

    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;

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

    Additional Resources