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

By default, ripple is added to every button and it does not require any additional classes or attributes.

Show code

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

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

Show code

        
            
          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://mdbootstrap.com/img/new/standard/city/043.webp'
                  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":

Show code

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

You can also use any CSS color name:

Show code

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

Or simply use the hex color code:

Show code

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

Duration

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

Show code

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

Centered

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

Show code

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

Unbound

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

Show code

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

Radius

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

Show code

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

Ripple - API

Import

Show code

javascript

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

Properties

MDBRipple

Name	Type	Default	Description	Example
`rippleTag`	string	`'div'`	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} />`