The Ripple action 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 Button, Tab and many more.


Here are the default options for the ripple. You can customise them as you like.

  color: 'currentColor',
  class: '',
  opacity: 0.1,
  centered: false,
  spreadingDuration: '.4s',
  spreadingDelay: '0s',
  spreadingTimingFunction: 'linear',
  clearingDuration: '1s',
  clearingDelay: '0s',
  clearingTimingFunction: 'ease-in-out',


Below is a collection of simple to complex examples.


Center the Ripple.

Custom Color

Change the color of the Ripple

Ripple in Components

Many components who internally use the Ripple action expose a ripple prop to customise it.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2022-10-03