Back to Dictionary
Action Feedback
●○○Ready to Use
Ripple Effect
A circular wave that expands from the point of contact when a user clicks or taps an element, providing immediate spatial feedback.
Live Demo
What It Is
A circular wave that expands from the point of contact when a user clicks or taps an element, providing immediate spatial feedback.
✓When to Use
- Text buttons and filled buttons
- List items in a mobile app
- Card surfaces that are clickable
✕When NOT to Use
- Small iconic buttons where the ripple obscures the icon
- Links inline within text paragraphs
Configuration Tips
- 01Ensure the ripple color has low opacity (e.g., black or white at 10-20% opacity)
- 02Clip the ripple to the container with overflow-hidden
You've Seen It In
Google/Material DesignAndroid OSYouTube
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Add a material design ripple effect to this button that starts where I click.
Code Example (Tailwind CSS)
export function RippleEffectDemo() {}