# TouchRipple

Source: https://lumeo.nativ.sh/components/touch-ripple

# 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 `:active` states with a more expressive animation
-   Wrapping any element to add tap feedback without changing its markup or styling

Preview Code

Basic Ripple on a Button

Tap me

Copy Code

Preview Code

Custom Color

Blue ripple

Red ripple

Green ripple

Copy Code

Preview Code

Custom Opacity and Duration

High opacity · Fast (300 ms)

Low opacity · Slow (900 ms)

Copy Code

Preview Code

Ripple on a Card

Interactive card

Tap anywhere on this card to see the ripple originate from your touch point.

Copy Code

Preview Code

List row (canonical mobile pattern)

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.

Copy Code

## 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](/components/button) — Primary interactive element that pairs naturally with TouchRipple
-   [Card](/components/card) — Content container that can be made tappable with TouchRipple
-   [SwipeActions](/components/swipe-actions) — Swipeable row with action buttons that can also use TouchRipple