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: true,
        ...
    };

    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>

Custom#

Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of p-ink element.

Green

Orange

Purple


<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
    Green
    <Ripple
        pt={{
            root: { style: { background: 'rgba(75, 175, 80, 0.3)' } }
        }}
    />
</div>
<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
    Orange
    <Ripple
        pt={{
            root: { style: { background: 'rgba(255, 193, 6, 0.3)' } }
        }}
    />
</div>
<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
    Purple
    <Ripple
        pt={{
            root: { style: { background: 'rgba(156, 39, 176, 0.3)' } }
        }}
    />
</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.

SUMMER SALE2025

Use coupon code PRSM25 at checkout to get 50% OFF everything in PrimeStore and PrimeBlocks.

Learn More