Ripple

Ripple directive adds ripple effect to the host element.

Import #


import { RippleModule } from 'primeng/ripple';

Default Demo Content.

Default


<div pRipple class="card text-primary bg-primary flex select-none justify-content-center align-items-center shadow-2">
    Default
</div>

Styling Demo Content.

Green

Orange

Purple


<div pRipple class="card styled-box-green shadow-2">
    Green
</div>

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-ripple	Host element.
p-ink	Ripple element.
p-ink-active	Ripple element during animating.

Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers.

Component does not include any interactive elements.