Ripple

Ripple component adds ripple effect to the host element.

Import#


import { Ripple } from 'primereact/ripple';

ConfigurationDoc#

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


PrimeReact.ripple = true;

Basic#

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 />
</div>

Style#

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

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.