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.

<button mdbRipple type="button" class="btn btn-primary btn-lg">Primary</button>
example 
<a mdbRipple href="#!">
  <img
    alt="example"
    class="img-fluid rounded"
    src="https://mdbootstrap.com/img/new/standard/city/043.webp"
  />
</a>

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": 

<button mdbRipple rippleColor="primary" type="button" class="btn btn-light">Primary</button>
<button mdbRipple rippleColor="secondary" type="button" class="btn btn-light">Secondary</button>
<button mdbRipple rippleColor="success" type="button" class="btn btn-light">Success</button>
<button mdbRipple rippleColor="danger" type="button" class="btn btn-light">Danger</button>
<button mdbRipple rippleColor="info" type="button" class="btn btn-light">Info</button>
<button mdbRipple rippleColor="light" type="button" class="btn btn-dark">Light</button>
<button mdbRipple rippleColor="dark" type="button" class="btn btn-light">Dark</button>

You can also use any CSS color name:

<button mdbRipple rippleColor="red" type="button" class="btn btn-light">Red</button>
<button mdbRipple rippleColor="green" type="button" class="btn btn-light">Green</button>
<button mdbRipple rippleColor="blue" type="button" class="btn btn-light">Blue</button>
<button mdbRipple rippleColor="yellow" type="button" class="btn btn-light">Yellow</button>
<button mdbRipple rippleColor="orange" type="button" class="btn btn-light">Orange</button>
<button mdbRipple rippleColor="purple" type="button" class="btn btn-light">Purple</button>
<button mdbRipple rippleColor="aqua" type="button" class="btn btn-light">Aqua</button>

Or simply use the hex color code:

<button mdbRipple rippleColor="#c953d6" type="button" class="btn btn-light">#c953d6</button>
<button mdbRipple rippleColor="#44c6e3" type="button" class="btn btn-light">#44c6e3</button>
<button mdbRipple rippleColor="#fcc834" type="button" class="btn btn-light">#fcc834</button>
<button mdbRipple rippleColor="#386f06" type="button" class="btn btn-light">#386f06</button>
<button mdbRipple rippleColor="#c1303a" type="button" class="btn btn-light">#c1303a</button>
<button mdbRipple rippleColor="#a57c3e" type="button" class="btn btn-light">#a57c3e</button>
<button mdbRipple rippleColor="#192ced" type="button" class="btn btn-light">#192ced</button>
<button mdbRipple rippleColor="#525740" type="button" class="btn btn-light">#525740</button>

Duration

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

<button mdbRipple type="button" class="btn btn-primary btn-lg">Default (500ms)</button>
<button mdbRipple rippleDuration="1000ms" type="button" class="btn btn-primary btn-lg">
  Duration 1S
</button>
<button mdbRipple rippleDuration="3s" type="button" class="btn btn-primary btn-lg">
  Duration 3s
</button>
<button mdbRipple rippleDuration="5s" type="button" class="btn btn-primary btn-lg">
  Duration 5s
</button>
<button mdbRipple rippleDuration="10s" type="button" class="btn btn-primary btn-lg">
  Duration 10s
</button>

Centered

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

<button mdbRipple [rippleCentered]="true" class="btn btn-primary btn-lg">
  Centered ripple
</button>

Unbound

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

<button
  mdbRipple
  [rippleUnbound]="true"
  rippleColor="dark"
  type="button"
  class="btn btn-primary"
>
  Unbound
</button>

Radius

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

<button mdbRipple type="button" class="btn btn-primary btn-lg">Default</button>
<button mdbRipple [rippleRadius]="10" class="btn btn-primary btn-lg">10</button>
<button mdbRipple [rippleRadius]="20" class="btn btn-primary btn-lg">25</button>
<button mdbRipple [rippleRadius]="50" class="btn btn-primary btn-lg">50</button>

Ripple - API

Import

import { MdbRippleModule } from 'mdb-angular-ui-kit/ripple';
…
@NgModule ({
  ...
  imports: [MdbRippleModule],
  ...
})

Inputs

Name Type Default Description
rippleCentered Boolean false Centers the position of ripple
rippleColor String '' Changes color of ripple
rippleDuration String '500ms' Sets duration of animation
rippleRadius Number 0 Sets radius value
rippleUnbound Boolean false Sets whether the effect should go beyond the wrapper's boundaries