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>

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.