Ripple

Bootstrap 5 Ripple

The ripple method generates a radial effect in the form of a visual ripple that expands outward from the user's touch. This visual feedback, known as a ripple, serves to indicate touch events, offering users a clear signal that an element is being interacted with.

Note: Read the API tab to find all available options and advanced customization

Required ES init: Ripple *

* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

Add data-mdb-ripple-init attribute to the clickable element to initialize the ripple effect.

Show code Edit in sandbox

HTML
JavaScript

        
            
              <button type="button" class="btn btn-primary btn-lg" data-mdb-ripple-init data-mdb-ripple-color="light">Primary</button>

        
            
              // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

You can easily apply the ripple effect to images by using the data-mdb-ripple-init attribute.

Los Angeles Skyscrapers

Show code Edit in sandbox

HTML
JavaScript

        
            
              <a data-mdb-ripple-init href="#!">
                <img alt="Los Angeles Skyscrapers" class="img-fluid rounded" src="https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp"/>
              </a>

        
            
              // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

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

Show code Edit in sandbox

HTML
JavaScript

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

        
            
              // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

You can also use any CSS color name:

Show code Edit in sandbox

HTML
JavaScript

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

        
            
              // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

Or simply use the hex color code:

Show code Edit in sandbox

HTML
JavaScript

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

        
            
              // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

Duration

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

Show code Edit in sandbox

HTML
JavaScript

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

        
            
              // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

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.

Show code Edit in sandbox

HTML
JavaScript

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

        
            
              // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

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.

Show code Edit in sandbox

HTML
JavaScript

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

        
            
              // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

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"

Show code Edit in sandbox

HTML
JavaScript

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

        
            
              // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

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.

Palms by the Pool

Card title

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

Button

Empire State Building

Card title

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

Button

Paris - Eiffel Tower

Card title

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

Button

Show code Edit in sandbox

HTML
JavaScript
umd

ES UMD

        
            
              <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://mdbcdn.b-cdn.net/img/new/standard/city/024.webp" class="card-img-top" alt="Palms by the Pool"/>
                    </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 example-class">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://mdbcdn.b-cdn.net/img/new/standard/city/025.webp" class="card-img-top" alt="Empire State Building"/>
                    </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 example-class">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://mdbcdn.b-cdn.net/img/new/standard/city/032.webp" class="card-img-top" alt="Paris - Eiffel Tower"/>
                    </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 example-class">Button</a>
                    </div>
                  </div>
                  <!-- Card -->
                </div>
              </div>

        
            
            // Initialization for ES Users
              import { Ripple, initMDB } from "mdb-ui-kit";

              initMDB({ Ripple });

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

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

Ripple - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Show code Edit in sandbox

JavaScript
umd

ES UMD

        
            
            import { Ripple, initMDB } from "mdb-ui-kit";
            initMDB({ Ripple });

        
            
            import 'mdb-ui-kit';

Usage

Via data attributes

Using the Ripple method doesn't require any additional JavaScript code - simply add data-mdb-ripple-init attribute to element you want to use ripple effect on and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

Show code Edit in sandbox

HTML

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

Via javascript

Show code Edit in sandbox

HTML
JavaScript
umd

ES UMD

        
            
              <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 Ripple(cardRipple, {
                  color: 'light'
                })
              });

        
            
              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.

Show code Edit in sandbox

HTML
JavaScript

        
            
          <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).ready(() => {
            $('.example-class').ripple(options);
          });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-ripple-color="".

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)`
`getOrCreateInstance`	Static method which returns the ripple instance associated to a DOM element or create a new one in case it wasn't initialized.	`Ripple.getOrCreateInstance(rippleElement)`

Show code Edit in sandbox

JavaScript
umd

ES UMD

        
            
            const rippleElement = document.getElementById('rippleElement');
            const ripple = new Ripple(rippleElement);
            ripple.dispose();

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