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.jpg"
            />
          </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