Ripples
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-tab-item and many more.

Go to api

Examples

Buttons by default have ripples enabled. This can be removed with the prop :ripple="false".

Using a helper class, you can change the color of the ripple.

Tabs by default have ripples disabled. This can be enabled with the ripple prop.

List items by default have ripples disabled. This can be enabled with the ripple prop.

Toolbar items by default have ripples disabled. This can be enabled with the ripple prop.

Expansion panels by default have ripples disabled. This can be enabled with the ripple prop.

Add the ripple effect to a standard HTML element. This can be enabled with the v-ripple HTML attribute.

API