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
Button already animates a click ripple via its built-in press-feedback system — don't double-wrap a Button. TouchRipple is a low-level wrapper for any clickable element that doesn't already ripple: a Card, Avatar, a custom div, a list row, or an icon. The canonical use case is a tappable list row — see the demo below.
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
| Property | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | — | The element(s) to wrap with ripple feedback. Must have a definite size for the ripple to be visible. |
| Color | string | "currentColor" | CSS color value for the ripple. Accepts any valid CSS color (hex, hsl, named color, currentColor). |
| Opacity | double | 0.25 | Peak opacity of the ripple wave. Use lower values (0.1–0.15) on light backgrounds and higher values (0.3–0.5) for stronger emphasis. |
| DurationMs | int | 500 | Duration of the ripple animation in milliseconds. Controls both expand and fade timing. |
| Class | string? | null | Additional CSS classes for the ripple container. Use to set display (inline-block, block) and border-radius to match the child. |
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