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