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
*
* 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.
<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.
<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":
<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:
<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:
<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.
<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.
<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.
<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"
<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.
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://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.
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.
<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
<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.
<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)
|
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();