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.

Edit in sandbox 
<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
Edit in sandbox 
<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":

Edit in sandbox 
<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:

Edit in sandbox 
<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:

Edit in sandbox 
<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.

Edit in sandbox 
<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.

Edit in sandbox 
<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.

Edit in sandbox 
<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"

Edit in sandbox 
<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
Edit in sandbox 
<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.

Edit in sandbox 
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.

Edit in sandbox 
<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

Edit in sandbox 
<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.

Edit in sandbox 
<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)
Edit in sandbox 
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();