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>
            <a mdbRipple href="#!">
                class="img-fluid rounded"


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>


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 mdbRipple rippleDuration="3s" type="button" class="btn btn-primary btn-lg">
              Duration 3s
            <button mdbRipple rippleDuration="5s" type="button" class="btn btn-primary btn-lg">
              Duration 5s
            <button mdbRipple rippleDuration="10s" type="button" class="btn btn-primary btn-lg">
              Duration 10s


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


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

            class="btn btn-primary"


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 { MdbRippleModule } from 'mdb-angular-ui-kit/ripple';
          @NgModule ({
            imports: [MdbRippleModule],


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