TouchRipple
A Material Design-style radial ripple that emanates from the exact pointer-down position to give tactile feedback on any tappable element.
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
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