Ripple

Ripple directive adds ripple effect to the host element.

Import #


import { Ripple } from 'primeng/ripple';

Default #

Default Demo Content.

Ripple option at the configurator needs to be turned on for the demo.

Default


<div pRipple class="ripple-box">Default</div>

Custom #

Styling Demo Content.

Ripple option at the configurator needs to be turned on for the demo.

Green

Orange

Purple


<div pRipple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">
    Green
</div>
<div pRipple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">
    Orange
</div>
<div pRipple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">
    Purple
</div>

Accessibility #

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.