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.


//_app.js
import { PrimeReactProvider } from 'primereact/api';

export default function MyApp({ Component }) {
    const value = {
        ripple: false,
        ...
    };

    return (
        <PrimeReactProvider value={value}>
            <App />
        </PrimeReactProvider>
    );
}

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.