packages/docs/src/pages/en/directives/ripple.md
The v-ripple directive is used to show action from a user. It can be applied to any block level element. Numerous components come with the ripple directive built in, such as the v-btn, v-tabs-item and many more.
Basic ripple functionality can be enabled just by using v-ripple directive on a component or an HTML element
| Directive | Description |
|---|---|
| v-ripple | The ripple directive |
If multiple elements have the ripple directive applied, only the inner one will show the effect. This can also be done without having a visible ripple by using v-ripple.stop to prevent ripples in the outer element if the inner element is clicked on. v-ripple.stop will not actually stop propagation of the mousedown/touchstart events unlike other workarounds.
When a center option is used ripple will always originate from the center of the target.
Using a helper class, you can change the color of the ripple.
<ExamplesExample file="v-ripple/misc-custom-color" />Some components provide the ripple prop that allows you to control the ripple effect. You can turn it off or customize the behavior by using class or center options.