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. 

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.

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

export default function App() {
  return (
    <MDBRipple rippleTag="a" href="#!">
      <img
        alt="example"
        className="img-fluid rounded"
        src="https://mdbootstrap.com/img/new/standard/city/043.webp"
      />
    </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 { 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:

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:

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. 

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. 

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. 

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} 

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

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" />
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} />