Skip to content
EN

TouchRipple API

The API documentation of the TouchRipple React component. Learn more about the props and the CSS customization points.

import TouchRipple from '@material-ui/core/ButtonBase/TouchRipple.js/TouchRipple';

Props

Name Type Default Description
center bool false If true, the ripple starts at the center of the component rather than at the point of interaction.
classes object Override or extend the styles applied to the component. See CSS API below for more details.

The ref is attached to an Imperative Handle. Have a look at the implementation of the component for more detail.

Any other props supplied will be provided to the root element (native element).

CSS

  • Style sheet name: MuiTouchRipple.
  • Style sheet details:
Rule name Global class Description
root MuiTouchRipple-root Styles applied to the root element.
ripple MuiTouchRipple-ripple Styles applied to the internal Ripple components ripple class.
rippleVisible MuiTouchRipple-rippleVisible Styles applied to the internal Ripple components rippleVisible class.
ripplePulsate MuiTouchRipple-ripplePulsate Styles applied to the internal Ripple components ripplePulsate class.
child MuiTouchRipple-child Styles applied to the internal Ripple components child class.
childLeaving MuiTouchRipple-childLeaving Styles applied to the internal Ripple components childLeaving class.
childPulsate MuiTouchRipple-childPulsate Styles applied to the internal Ripple components childPulsate class.

You can override the style of the component thanks to one of these customization points:

If that's not sufficient, you can check the implementation of the component for more detail.

Notes

The component is fully StrictMode compatible.