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