Ripple directive

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.

Usage

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


API

v-ripple

Examples

Custom color

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


Tabs

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


Navigation drawers

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


Toolbars

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


Expansion panels

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


Components

Several other components have built-in support for ripples. Enable it with the ripple prop.


Standard HTML element

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