Ripple directive adds ripple effect to the host element.

Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);

app.use(PrimeVue, { ripple: true });

Ripple describes how to use it with your own components and standard elements that needs to be imported and configured with a name of your choice. Global configuration is done with the app.directive function.

import Ripple from 'primevue/ripple';

app.directive('ripple', Ripple);

To start with, Ripple needs to be enabled globally. See the Configuration API for details.

mounted() {
    this.$primevue.config.ripple = true;

Ripple is enabled by adding add p-ripple class to the target and attach the directive with the v- prefix..


<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>

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.


<div v-ripple class="p-ripple card shadow-2 styled-box-green">Green</div>
<div v-ripple class="p-ripple card shadow-2 styled-box-orange">Orange</div>
<div v-ripple class="p-ripple card shadow-2 styled-box-purple">Purple</div>

Following is the list of structural style classes, for theming classes visit theming page.

p-rippleHost element.
p-inkRipple element.
p-ink-activeRipple element during animating.

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.