Ripple

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

By default, ripple is added to every button (via .btn class) and it does not require any additional classes or attributes. 


          <button type="button" class="btn btn-primary btn-lg">Primary</button>

It's also automatically added to the .ripple class. Thanks to this you can use the .ripple class to apply the ripple effect to the given clickable element - for example to the image wrapped in <a> element.

example 

          <a class="ripple" href="#!">
            <img
              alt="example"
              class="img-fluid rounded"
              src="https://mdbootstrap.com/img/new/standard/city/043.webp"
            />
          </a>

Colors

By using data-mdb-ripple-color attribute you can change the color of the ripple.

You can use the colors from the basic MDB palette, for example data-mdb-ripple-color="primary" or data-mdb-ripple-color="danger": 


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

You can also use any CSS color name:


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

Or simply use the hex color code:


          <button data-mdb-ripple-color="#c953d6" type="button" class="btn btn-light">
            #c953d6
          </button>
          <button data-mdb-ripple-color="#44c6e3" type="button" class="btn btn-light">
            #44c6e3
          </button>
          <button data-mdb-ripple-color="#fcc834" type="button" class="btn btn-light">
            #fcc834
          </button>
          <button data-mdb-ripple-color="#386f06" type="button" class="btn btn-light">
            #386f06
          </button>
          <button data-mdb-ripple-color="#c1303a" type="button" class="btn btn-light">
            #c1303a
          </button>
          <button data-mdb-ripple-color="#a57c3e" type="button" class="btn btn-light">
            #a57c3e
          </button>
          <button data-mdb-ripple-color="#192ced" type="button" class="btn btn-light">
            #192ced
          </button>
          <button data-mdb-ripple-color="#525740" type="button" class="btn btn-light">
            #525740
          </button>

Duration

By using data-mdb-ripple-duration attribute you can modify the duration of the ripple. 


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

Centered

If you add data-mdb-ripple-centered="true" attribute the ripple always starts in the center of the element instead of in the touched place. 


          <button type="button" data-mdb-ripple-centered="true" class="btn btn-primary btn-lg">
            Centered ripple
          </button>

Unbound

If you use data-mdb-ripple-unbound="true" attribute,the ripple won't be bonded to the given element and it will exceed its borders. 


          <button data-mdb-ripple-unbound="true" data-mdb-ripple-color="dark" type="button" class="btn btn-primary">
            Unbound
          </button>

Radius

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


          <button type="button" class="btn btn-primary btn-lg">
            Default
          </button>
          <button type="button" data-mdb-ripple-radius="10" class="btn btn-primary btn-lg">
            10
          </button>
          <button type="button" data-mdb-ripple-radius="25" class="btn btn-primary btn-lg">
            25
          </button>
          <button type="button" data-mdb-ripple-radius="50" class="btn btn-primary btn-lg">
            50
          </button>

JavaScript implementation

You can apply the ripple to multiple elements at once by using JavaScript. In the example below, we added a sample class .example-class to the <a> element wrapping the image, and then we use JavaScript to apply ripple to this class.

You can apply the ripple to any selector - classes, ID's or even native HTML elements.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button 

          <div class="row">
            <div class="col-md-4">
              <!-- Card -->
              <div class="card">
                <!-- Custom class for applying ripple -->
                <a href="#!" class="example-class">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/024.webp"
                    class="card-img-top"
                    alt="..."
                  />
                </a>
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the
                    card's content.
                  </p>
                  <a href="#!" class="btn btn-primary">Button</a>
                </div>
              </div>
              <!-- Card -->
            </div>

            <div class="col-md-4">
              <!-- Card -->
              <div class="card">
                <!-- Custom class for applying ripple -->
                <a href="#!" class="example-class">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/025.webp"
                    class="card-img-top"
                    alt="..."
                  />
                </a>
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the
                    card's content.
                  </p>
                  <a href="#!" class="btn btn-primary">Button</a>
                </div>
              </div>
              <!-- Card -->
            </div>

            <div class="col-md-4">
              <!-- Card -->
              <div class="card">
                <!-- Custom class for applying ripple -->
                <a href="#!" class="example-class">
                  <img
                    src="https://mdbootstrap.com/img/new/standard/city/032.webp"
                    class="card-img-top"
                    alt="..."
                  />
                </a>
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make up the bulk of the
                    card's content.
                  </p>
                  <a href="#!" class="btn btn-primary">Button</a>
                </div>
              </div>
              <!-- Card -->
            </div>
          </div>
        

          document.querySelectorAll('.example-class').forEach((cardRipple) => {
            new mdb.Ripple(cardRipple, { color: 'light' })
          });

Ripple - API

Usage

Via class

Add the .ripple class to the clickable element to apply the ripple effect.


          <a class="ripple" href="#!">
            <img
              alt="example"
              class="img-fluid rounded"
              src="https://mdbootstrap.com/img/new/standard/city/043.webp"
            />
          </a>

Via javascript

You can apply the ripple to any element using JavaScript. In the example below, we added a sample class .example-class to the <a> element wrapping the image, and then we use JavaScript to apply ripple to this clas 


          <a class="example-class" href="#!">
            <img
              alt="example"
              class="img-fluid rounded"
              src="https://mdbootstrap.com/img/new/standard/city/043.webp"
              style="max-width: 27rem;"
            />
          </a>
        

          document.querySelectorAll('.example-class').forEach((cardRipple) => {
            new mdb.Ripple(cardRipple, { color: 'light' })
          });

Via jQuery

Note: By default, MDB does not include jQuery and you have to add jQuery to the project on your own. 


          <a class="example-class" href="#!">
            <img
              alt="example"
              class="img-fluid rounded"
              src="https://mdbootstrap.com/img/new/standard/city/043.webp"
              style="max-width: 27rem;"
            />
          </a>
        

          $('.example-class').ripple(options);

Options

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

Methods

Name Description Example
dispose Manually dispose of component ripple.dispose()
getInstance Static method which allows you to get the ripple instance associated to a DOM element. Ripple.getInstance(rippleElement) 

        var rippleElement = document.getElementById('rippleElement')
        var ripple = new mdb.Ripple(rippleElement)
        ripple.dispose()

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component: 


          import { Ripple } from 'mdb-ui-kit';