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 />
9 tests across 1 file. Auto-generated from the test suite.
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.
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | — | The content the ripple overlays — the ripple host wraps this and spawns ripple spans on pointer-down over it. |
| Color | string | "currentColor" | Color of the ripple. Default: currentColor. |
| Opacity | double | 0.25 | Peak opacity of the ripple as it expands. Default: 0.25. |
| DurationMs | int | 500 | Duration of the ripple expand/fade animation in milliseconds, and how long its DOM node stays mounted before removal. Negative values are clamped to 0. Default: 500. |
| Class | string? | — | Additional CSS classes merged onto the ripple host div. |
| AdditionalAttributes | Dictionary<string, object>? | — | Additional HTML attributes captured and forwarded to the ripple host div. |
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