TouchRipple
A Material Design-style radial ripple that emanates from the exact pointer-down position to give tactile feedback on any tappable element.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <TouchRipple />
TouchRipple vs Button's built-in ripple
When to Use
- Cards, list rows, or custom divs that need touch feedback but aren't Buttons
- Mobile-first interfaces where the default browser tap highlight looks inconsistent
- Interactive tiles, gallery items, and menu entries that want a polished feel
- Replacing CSS
:activestates with a more expressive animation - Wrapping any element to add tap feedback without changing its markup or styling
Interactive card
Tap anywhere on this card to see the ripple originate from your touch point.
Alice Johnson
Tap to select
Bob Martinez
Tap to select
Carol Williams
Tap to select
The most common TouchRipple use case: a tappable list row that isn't a Button. Each row is a custom div, so it gets no built-in ripple — TouchRipple adds it.
API Reference
TouchRipple
ChildContent must have a definite size for the ripple to be visible — use Class to set display (inline-block, block) and border-radius to match the wrapped child, as in the demos above.
Related Components
- Button — Primary interactive element that pairs naturally with TouchRipple
- Card — Content container that can be made tappable with TouchRipple
- SwipeActions — Swipeable row with action buttons that can also use TouchRipple