Ripple

Ripple component adds ripple effect to the host element.


import PrimeReact from 'primereact/api';
import { Ripple } from 'primereact/ripple';
         

Default Demo Content.

Default

<div className="card text-primary bg-primary flex select-none justify-content-center align-items-center p-ripple shadow-2">
    Default
    <Ripple />
</div>
         

Styling Demo Content.

Green
Orange
Purple

<div className="card shadow-2 p-ripple styled-box-green">
    Green
    <Ripple />
</div>
<div className="card shadow-2 p-ripple styled-box-orange">
    Orange
    <Ripple />
</div>
<div className="card shadow-2 p-ripple styled-box-purple">
    Purple
    <Ripple />
</div>
         
NameElement
p-rippleHost element.
p-inkRipple element.
p-ink-activeRipple element during animating.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.
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.

Visit the API documentation for detailed information about all the properties, events and methods of the component.