Ripple component adds ripple effect to the host element.

import { Ripple } from 'primereact/ripple';

To start with, Ripple needs to be enabled globally. See the Configuration API for details.

PrimeReact.ripple = true;

Ripple is enabled by adding the component as a child and applying p-ripple class to the element.

Click Me

<div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
    Click Me
    <Ripple />
p-rippleHost element.
p-inkRipple element.
p-ink-activeRipple element during animating.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.
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.