Ripple

Ripple component adds ripple effect to the host element.

Import#


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

Default#

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>

Custom#

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>

Style#

Name	Element
p-ripple	Host element.
p-ink	Ripple element.
p-ink-active	Ripple element during animating.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.

API#

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

Ripple