Ripple component adds ripple effect to the host element.
import PrimeReact from 'primereact/api';
import { Ripple } from 'primereact/ripple';
Default Demo Content.
<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.
<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>
Name | Element |
---|---|
p-ripple | Host element. |
p-ink | Ripple element. |
p-ink-active | Ripple element during animating. |
Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers.
Component does not include any interactive elements.