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.
