Ripple

Ripple provides visual feedback when users interact with components.

Import

import { Ripple } from '@md3-react/core';

Basic Usage

The Ripple component adds Material Design touch ripple effects. It's typically used internally by other components like Button.

Live Editor

<Demo>
  <div style={{ position: 'relative', width: '200px', height: '100px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden' }}>
    <Ripple />
    <div style={{ position: 'relative', zIndex: 1, padding: '16px', textAlign: 'center' }}>
      Click me
    </div>
  </div>
</Demo>

Result

Loading...

Props

Prop	Type	Default	Description
disabled	boolean	false	Disables ripple effect

Usage with Custom Components

Wrap any element with Ripple to add touch feedback:

import { Ripple } from '@md3-react/core';

function CustomCard({ children }) {
  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      <Ripple />
      {children}
    </div>
  );
}