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.

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

Los Angeles Skyscrapers
Edit in sandbox 
        
            
          <a class="ripple" href="#!">
            <img alt="Los Angeles Skyscrapers" class="img-fluid rounded" src="https://mdbcdn.b-cdn.net/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":

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

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

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

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

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

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

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

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">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">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">Button</a>
                </div>
              </div>
              <!-- Card -->
            </div>
          </div>
        
        
    
        
            
          document.querySelectorAll('.example-class').forEach((cardRipple) => {
            new mdb.Ripple(cardRipple, { 
              rippleColor: 'light' 
            })
          });

Ripple - API

Usage

Via class

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

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

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 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, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-ripple-centered="".

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 mdb.Ripple(rippleElement)
        ripple.dispose()

Import

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

Edit in sandbox 
        
            
          import { Ripple } from 'mdb-ui-kit';