Ripple

React 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

Tag of the ripple element is MDBBtn by default. 


          import React from 'react';
          import { MDBRipple } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBRipple rippleColor='light' size='lg'>
                Primary
              </MDBRipple>
            );
          }

Wrap other elements into MDBRipple to initialize a ripple effect on them.

example 

          import React from 'react';
          import { MDBRipple } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBRipple rippleTag='span'>
                <img
                  alt='example'
                  className='img-fluid rounded'
                  src='https://mdbcdn.b-cdn.net/img/new/standard/city/043.jpg'
                  style={{ maxWidth: '27rem' }}
                />
              </MDBRipple>
            );
          }

Colors

By using rippleColor property you can change the color of the ripple.

You can use the colors from the basic MDB palette, for example rippleColor="primary" or rippleColor="danger": 


          import React from 'react';
          import { MDBRipple } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBRipple rippleColor='primary' color='light'>
                  Primary
                </MDBRipple>
                <MDBRipple rippleColor='secondary' color='light'>
                  Secondary
                </MDBRipple>
                <MDBRipple rippleColor='success' color='light'>
                  Success
                </MDBRipple>
                <MDBRipple rippleColor='danger' color='light'>
                  Danger
                </MDBRipple>
                <MDBRipple rippleColor='info' color='light'>
                  Info
                </MDBRipple>
                <MDBRipple rippleColor='light' color='dark'>
                  Light
                </MDBRipple>
                <MDBRipple rippleColor='dark' color='light'>
                  Dark
                </MDBRipple>
              </>
            );
          }

You can also use any CSS color name:


          import React from 'react';
          import { MDBRipple } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBRipple rippleColor='red' color='light'>
                  Red
                </MDBRipple>
                <MDBRipple rippleColor='green' color='light'>
                  Green
                </MDBRipple>
                <MDBRipple rippleColor='blue' color='light'>
                  Blue
                </MDBRipple>
                <MDBRipple rippleColor='yellow' color='light'>
                  Yellow
                </MDBRipple>
                <MDBRipple rippleColor='orange' color='light'>
                  Orange
                </MDBRipple>
                <MDBRipple rippleColor='purple' color='light'>
                  Purple
                </MDBRipple>
                <MDBRipple rippleColor='aqua' color='light'>
                  Aqua
                </MDBRipple>
              </>
            );
          }

Or simply use the hex color code:


          import React from 'react';
          import { MDBRipple } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBRipple rippleColor='#c953d6' color='light'>
                  #c953d6
                </MDBRipple>
                <MDBRipple rippleColor='#44c6e3' color='light'>
                  #44c6e3
                </MDBRipple>
                <MDBRipple rippleColor='#fcc834' color='light'>
                  #fcc834
                </MDBRipple>
                <MDBRipple rippleColor='#386f06' color='light'>
                  #386f06
                </MDBRipple>
                <MDBRipple rippleColor='#c1303a' color='light'>
                  #c1303a
                </MDBRipple>
                <MDBRipple rippleColor='#a57c3e' color='light'>
                  #a57c3e
                </MDBRipple>
                <MDBRipple rippleColor='#192ced' color='light'>
                  #192ced
                </MDBRipple>
                <MDBRipple rippleColor='#525740' color='light'>
                  #525740
                </MDBRipple>
              </>
            );
          }

Duration

By using rippleDuration property you can modify the duration of the ripple. 


          import React from 'react';
          import { MDBRipple } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBRipple size='lg'>Default (500ms)</MDBRipple>
                <MDBRipple rippleDuration={1000} size='lg'>
                  1s
                </MDBRipple>
                <MDBRipple rippleDuration={3000} size='lg'>
                  3s
                </MDBRipple>
                <MDBRipple rippleDuration={5000} size='lg'>
                  5s
                </MDBRipple>
                <MDBRipple rippleDuration={10000} size='lg'>
                  10s
                </MDBRipple>
              </>
            );
          }

Centered

If you add rippleCentered property the ripple always starts in the center of the element instead of in the touched place. 


          import React from 'react';
          import { MDBRipple } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBRipple rippleCentered size='lg'>
                Centered ripple
              </MDBRipple>
            );
          }

Unbound

If you use rippleUnbound property,the ripple won't be bonded to the given element and it will exceed its borders. 


          import React from 'react';
          import { MDBRipple } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBRipple rippleUnbound rippleColor='dark'>
                Unbound
              </MDBRipple>
            );
          }

Radius

By using rippleRadius property you can modify the radius of the ripple. The numeric value is expressed in pixels, for example: rippleRadius={10} 


          import React from 'react';
          import { MDBRipple } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBRipple rippleColor='light' size='lg'>Default</MDBRipple>
                <MDBRipple rippleColor='light' rippleRadius={10} size='lg'>
                  10
                </MDBRipple>
                <MDBRipple rippleColor='light' rippleRadius={25} size='lg'>
                  25
                </MDBRipple>
                <MDBRipple rippleColor='light' rippleRadius={50} size='lg'>
                  50
                </MDBRipple>
              </>
            );
          }

Ripple - API

Import


        import { MDBRipple } from 'mdb-react-ui-kit';

Properties

MDBRipple

Name Type Default Description Example
rippleTag String 'MDBBtn' Defines tag of the MDBRipple element <MDBRipple tag="span" />
className String '' Add custom class to MDBRipple <MDBRipple className="class" />
rippleCentered Boolean '' Centers the position of ripple <MDBRipple rippleCentered />
rippleUnbound Boolean '' Sets whether the effect should go beyond the wrapper's boundaries <MDBRipple rippleUnbound />
rippleColor String '' Changes color of ripple <MDBRipple rippleColor="secondary" />
rippleRadius Number '' Sets radius value <MDBRipple rippleRadius={10} />
rippleDuration Number '' Sets duration of animation <MDBRipple rippleDuration={10} />