Ripple

Angular Bootstrap 5 Ripple

The ripple method provides a radial action in the form of a visual ripple expanding outward from the user’s touch. Ripple is a visual form of feedback for touch events providing users a clear signal that an element is being touched.

Note: Read the API tab to find all available options and advanced customization

Basic example

Add mdbRipple directive to an element to enable ripple effect.

Show code
example
Show code

Colors

By using rippleColor input you can change the color of the ripple.

You can use the colors from the basic MDB palette, for example rippleColor="primary" or rippleColor="danger":

Show code

You can also use any CSS color name:

Show code

Or simply use the hex color code:

Show code

Duration

By using rippleDuration input you can modify the duration of the ripple.

Show code

Centered

If you add [rippleCentered]="true" input, the ripple always starts in the center of the element instead of in the touched place.

Show code

Unbound

If you use [rippleUnbound]="true" input, the ripple won't be bonded to the given element and it will exceed its borders.

Show code

Radius

By using rippleRadius input you can modify the radius of the ripple. The numeric value is expressed in pixels, for example: rippleRadius="10"

Show code