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';

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:

• With a rule name of the classes object prop.
• With a global class name.
• With a theme and an overrides property.

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

Notes

The component is fully StrictMode compatible.