Fluxo UIFluxo UIv0.4.93

Touch Ripple

A drop-in wrapper that adds a Material-style ripple to any tappable element — buttons, cards, list rows, icons.

Basic Usage

Tap to ripple

A Material-style ink ripple emits from the tap location and fades out.

import { TouchRipple } from 'fluxo-ui';

<TouchRipple as="button" className="my-card" onClick={onClick} role="button" tabIndex={0}>
    Tap me
</TouchRipple>

Variants

Four ripple variants

Material is the standard tap ink, Subtle is fainter, Highlight uses the primary color, Outline draws a focus ring on press/focus.

<TouchRipple as="button" variant="material">Material</TouchRipple>
<TouchRipple as="button" variant="subtle">Subtle</TouchRipple>
<TouchRipple as="button" variant="highlight">Highlight</TouchRipple>
<TouchRipple as="button" variant="outline">Outline</TouchRipple>

Import

import { TouchRipple } from 'fluxo-ui';
import type { TouchRippleProps, TouchRippleVariant } from 'fluxo-ui';

Props

childrenreq
ReactNode

Children rendered inside the ripple host.

color
string

Override the ripple color (defaults to currentColor).

center
boolean"false"

Always start the ripple at the center, regardless of tap location.

duration
number"500"

Ripple animation duration in milliseconds.

variant
'material' | 'subtle' | 'highlight' | 'outline'"'material'"

Visual style. 'material' is the standard tap ripple, 'subtle' is a faint variant, 'highlight' uses the primary color, 'outline' adds a focus ring on activation.

disabled
boolean"false"

Disable ripple emission and pointer interaction.

className
string

Additional CSS class for the wrapper.

as
keyof JSX.IntrinsicElements"'div'"

Element type to render. Use 'button' when used as a clickable surface.

onClick
(event: MouseEvent) => void

Forwarded click handler.

role
string

ARIA role for the host element.

tabIndex
number

Tab order index for keyboard navigation.

ariaLabel
string

Accessible name for the host element.

style
React.CSSProperties

Inline style passed through to the host element.

Features

Origin-aware ink

Ripple grows from the tap location (or centered when center is set).

Four variants

material, subtle, highlight (primary color), outline (focus ring).

Touch + keyboard

Pointer-down emits a ripple; Enter/Space emits a centered one.

Custom host element

Render as any tag via as= — usually button, a, or div.

Reduced motion

Ripple disabled automatically under prefers-reduced-motion.

Tap highlight suppressed

Removes the default iOS gray tap highlight in favor of the ripple.