Ripple

Ripple directive adds ripple effect to the host element.


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.

NameElement
p-rippleHost element.
p-inkRipple element.
p-ink-activeRipple element during animating.

Screen Reader

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

Keyboard Support

Component does not include any interactive elements.