React Ripple Button

React ripple button with Material Design click animations. Position-aware ripple effects and multiple color variants with TypeScript and shadcn/ui styling.

React

Framer Motion

Class Variance Authority

Building Material Design interactions?

Join our Discord community for help from other developers.

Button feedback is everywhere—form submissions, purchase flows, navigation. But most buttons just change color or scale slightly. Flat. Minimal. Forgettable. Meanwhile, users expect rich tactile feedback that responds to their exact interaction. This React component gives you Material Design ripple effects that emanate from the precise click position, creating satisfying visual waves that make every interaction feel responsive and intentional.

Ripple emanates from click position

Click anywhere on the button to see the ripple effect originate from that exact spot:

Loading component...

'use client'; import * as React from 'react';import { type HTMLMotionProps, motion, type Transition } from 'motion/react';import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const buttonVariants = cva(  "relative overflow-hidden cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default: 'bg-primary text-primary-foreground hover:bg-primary/90',        destructive:          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',        outline:          'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',        secondary:          'bg-secondary text-secondary-foreground hover:bg-secondary/80',        ghost:          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',      },      size: {        default: 'h-10 px-4 py-2 has-[>svg]:px-3',        sm: 'h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',        lg: 'h-11 px-8 has-[>svg]:px-6',        icon: 'size-10',      },    },    defaultVariants: {      variant: 'default',      size: 'default',    },  },); const rippleVariants = cva('absolute rounded-full size-5 pointer-events-none', {  variants: {    variant: {      default: 'bg-primary-foreground',      destructive: 'bg-destructive',      outline: 'bg-input',      secondary: 'bg-secondary',      ghost: 'bg-accent',    },  },  defaultVariants: {    variant: 'default',  },}); type Ripple = {  id: number;  x: number;  y: number;}; type RippleButtonProps = HTMLMotionProps<'button'> & {  children: React.ReactNode;  rippleClassName?: string;  scale?: number;  transition?: Transition;} & VariantProps<typeof buttonVariants>; function RippleButton({  ref,  children,  onClick,  className,  rippleClassName,  variant,  size,  scale = 10,  transition = { duration: 0.6, ease: 'easeOut' },  ...props}: RippleButtonProps) {  const [ripples, setRipples] = React.useState<Ripple[]>([]);  const buttonRef = React.useRef<HTMLButtonElement>(null);  React.useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement);   const createRipple = React.useCallback(    (event: React.MouseEvent<HTMLButtonElement>) => {      const button = buttonRef.current;      if (!button) return;       const rect = button.getBoundingClientRect();      const x = event.clientX - rect.left;      const y = event.clientY - rect.top;       const newRipple: Ripple = {        id: Date.now(),        x,        y,      };       setRipples((prev) => [...prev, newRipple]);       setTimeout(() => {        setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));      }, 600);    },    [],  );   const handleClick = React.useCallback(    (event: React.MouseEvent<HTMLButtonElement>) => {      createRipple(event);      if (onClick) {        onClick(event);      }    },    [createRipple, onClick],  );   return (    <motion.button      ref={buttonRef}      data-slot="ripple-button"      onClick={handleClick}      whileTap={{ scale: 0.95 }}      whileHover={{ scale: 1.05 }}      className={cn(buttonVariants({ variant, size, className }))}      {...props}    >      {children}      {ripples.map((ripple) => (        <motion.span          key={ripple.id}          initial={{ scale: 0, opacity: 0.5 }}          animate={{ scale, opacity: 0 }}          transition={transition}          className={cn(            rippleVariants({ variant, className: rippleClassName }),          )}          style={{            top: ripple.y - 10,            left: ripple.x - 10,          }}        />      ))}    </motion.button>  );} export { RippleButton, type RippleButtonProps };

Built for React applications with TypeScript and Next.js. Uses Framer Motion for physics-based ripple animations that feel natural and fluid. The ripple isn't random—it calculates the exact click coordinates and expands outward with proper easing. Class Variance Authority provides type-safe variants while maintaining consistent Material Design principles. Perfect for shadcn/ui design systems.

Why most button feedback feels disconnected

Developers add a basic hover state and think they're done with interaction design. Maybe they throw in a scale transform for "premium" feel. The problem? Users touch a specific spot, but the feedback comes from everywhere. It's not responsive to their action—it's just a generic animation triggered by proximity.

Material Design solved this with ripple effects that originate from the interaction point. The visual feedback connects directly to user input. The expanding circle creates anticipation and confirms the action was registered. It's not just decoration—it's functional communication.

This component handles the complex coordinate calculation, animation orchestration, and cleanup automatically. Multiple ripples can overlap for rapid clicking. The animation respects accessibility preferences. And the variant system ensures visual hierarchy while maintaining the same delightful interaction pattern.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ripple-button.json

npx shadcn@latest add https://www.shadcn.io/registry/ripple-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ripple-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/ripple-button.json

Examples

Button Variants

Five Material Design-inspired variants for different UI contexts:

Loading component...

'use client'; import * as React from 'react';import { type HTMLMotionProps, motion, type Transition } from 'motion/react';import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const buttonVariants = cva(  "relative overflow-hidden cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default: 'bg-primary text-primary-foreground hover:bg-primary/90',        destructive:          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',        outline:          'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',        secondary:          'bg-secondary text-secondary-foreground hover:bg-secondary/80',        ghost:          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',      },      size: {        default: 'h-10 px-4 py-2 has-[>svg]:px-3',        sm: 'h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',        lg: 'h-11 px-8 has-[>svg]:px-6',        icon: 'size-10',      },    },    defaultVariants: {      variant: 'default',      size: 'default',    },  },); const rippleVariants = cva('absolute rounded-full size-5 pointer-events-none', {  variants: {    variant: {      default: 'bg-primary-foreground',      destructive: 'bg-destructive',      outline: 'bg-input',      secondary: 'bg-secondary',      ghost: 'bg-accent',    },  },  defaultVariants: {    variant: 'default',  },}); type Ripple = {  id: number;  x: number;  y: number;}; type RippleButtonProps = HTMLMotionProps<'button'> & {  children: React.ReactNode;  rippleClassName?: string;  scale?: number;  transition?: Transition;} & VariantProps<typeof buttonVariants>; function RippleButton({  ref,  children,  onClick,  className,  rippleClassName,  variant,  size,  scale = 10,  transition = { duration: 0.6, ease: 'easeOut' },  ...props}: RippleButtonProps) {  const [ripples, setRipples] = React.useState<Ripple[]>([]);  const buttonRef = React.useRef<HTMLButtonElement>(null);  React.useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement);   const createRipple = React.useCallback(    (event: React.MouseEvent<HTMLButtonElement>) => {      const button = buttonRef.current;      if (!button) return;       const rect = button.getBoundingClientRect();      const x = event.clientX - rect.left;      const y = event.clientY - rect.top;       const newRipple: Ripple = {        id: Date.now(),        x,        y,      };       setRipples((prev) => [...prev, newRipple]);       setTimeout(() => {        setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));      }, 600);    },    [],  );   const handleClick = React.useCallback(    (event: React.MouseEvent<HTMLButtonElement>) => {      createRipple(event);      if (onClick) {        onClick(event);      }    },    [createRipple, onClick],  );   return (    <motion.button      ref={buttonRef}      data-slot="ripple-button"      onClick={handleClick}      whileTap={{ scale: 0.95 }}      whileHover={{ scale: 1.05 }}      className={cn(buttonVariants({ variant, size, className }))}      {...props}    >      {children}      {ripples.map((ripple) => (        <motion.span          key={ripple.id}          initial={{ scale: 0, opacity: 0.5 }}          animate={{ scale, opacity: 0 }}          transition={transition}          className={cn(            rippleVariants({ variant, className: rippleClassName }),          )}          style={{            top: ripple.y - 10,            left: ripple.x - 10,          }}        />      ))}    </motion.button>  );} export { RippleButton, type RippleButtonProps };

Size Options

Four sizes optimized for different use cases and touch targets:

Loading component...

'use client'; import * as React from 'react';import { type HTMLMotionProps, motion, type Transition } from 'motion/react';import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const buttonVariants = cva(  "relative overflow-hidden cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default: 'bg-primary text-primary-foreground hover:bg-primary/90',        destructive:          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',        outline:          'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',        secondary:          'bg-secondary text-secondary-foreground hover:bg-secondary/80',        ghost:          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',      },      size: {        default: 'h-10 px-4 py-2 has-[>svg]:px-3',        sm: 'h-9 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',        lg: 'h-11 px-8 has-[>svg]:px-6',        icon: 'size-10',      },    },    defaultVariants: {      variant: 'default',      size: 'default',    },  },); const rippleVariants = cva('absolute rounded-full size-5 pointer-events-none', {  variants: {    variant: {      default: 'bg-primary-foreground',      destructive: 'bg-destructive',      outline: 'bg-input',      secondary: 'bg-secondary',      ghost: 'bg-accent',    },  },  defaultVariants: {    variant: 'default',  },}); type Ripple = {  id: number;  x: number;  y: number;}; type RippleButtonProps = HTMLMotionProps<'button'> & {  children: React.ReactNode;  rippleClassName?: string;  scale?: number;  transition?: Transition;} & VariantProps<typeof buttonVariants>; function RippleButton({  ref,  children,  onClick,  className,  rippleClassName,  variant,  size,  scale = 10,  transition = { duration: 0.6, ease: 'easeOut' },  ...props}: RippleButtonProps) {  const [ripples, setRipples] = React.useState<Ripple[]>([]);  const buttonRef = React.useRef<HTMLButtonElement>(null);  React.useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement);   const createRipple = React.useCallback(    (event: React.MouseEvent<HTMLButtonElement>) => {      const button = buttonRef.current;      if (!button) return;       const rect = button.getBoundingClientRect();      const x = event.clientX - rect.left;      const y = event.clientY - rect.top;       const newRipple: Ripple = {        id: Date.now(),        x,        y,      };       setRipples((prev) => [...prev, newRipple]);       setTimeout(() => {        setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));      }, 600);    },    [],  );   const handleClick = React.useCallback(    (event: React.MouseEvent<HTMLButtonElement>) => {      createRipple(event);      if (onClick) {        onClick(event);      }    },    [createRipple, onClick],  );   return (    <motion.button      ref={buttonRef}      data-slot="ripple-button"      onClick={handleClick}      whileTap={{ scale: 0.95 }}      whileHover={{ scale: 1.05 }}      className={cn(buttonVariants({ variant, size, className }))}      {...props}    >      {children}      {ripples.map((ripple) => (        <motion.span          key={ripple.id}          initial={{ scale: 0, opacity: 0.5 }}          animate={{ scale, opacity: 0 }}          transition={transition}          className={cn(            rippleVariants({ variant, className: rippleClassName }),          )}          style={{            top: ripple.y - 10,            left: ripple.x - 10,          }}        />      ))}    </motion.button>  );} export { RippleButton, type RippleButtonProps };

Features

Click-position ripples that emanate from exact interaction coordinates with physics-based expansion
Material Design variants including default, destructive, outline, secondary, and ghost styles
Size variations with responsive scaling (sm, default, lg, icon) using Class Variance Authority
Framer Motion animations with customizable transition duration and easing curves
Multiple ripple support allowing overlapping effects for rapid interactions
Automatic cleanup removing ripple elements after animation completion
TypeScript definitions with complete interface definitions and variant types
Accessibility integration respecting prefers-reduced-motion for inclusive design
shadcn/ui compatibility using design tokens and utility classes

Use Cases

This free open source React component works perfectly for:

Call-to-action buttons - Primary actions and form submissions built with Next.js
Interactive dashboards - Action buttons with visual feedback using TypeScript
E-commerce interfaces - Add to cart, purchase, and navigation buttons with shadcn/ui
Gaming interfaces - Interactive buttons that provide satisfying visual feedback
Mobile-first designs - Touch-responsive buttons that feel native on all devices
Admin panels - Professional interfaces with Material Design consistency

API Reference

RippleButton

The main component for Material Design ripple button interactions.

Prop	Type	Default	Description
`children`	`React.ReactNode`	required	Button content to display
`variant`	`'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost'`	`'default'`	Visual style variant
`size`	`'default' \| 'sm' \| 'lg' \| 'icon'`	`'default'`	Button size variant
`scale`	`number`	`10`	Maximum scale factor for ripple animation
`transition`	`Transition`	`{ duration: 0.6, ease: 'easeOut' }`	Framer Motion transition for ripple effect
`rippleClassName`	`string`	-	Additional CSS classes for ripple elements
`className`	`string`	-	Additional CSS classes for button
`onClick`	`(event: React.MouseEvent) => void`	-	Click handler function
`disabled`	`boolean`	`false`	Disables button and prevents ripple effects
`...props`	`ButtonHTMLAttributes`	-	All native button props supported

Variant Specifications

Variant	Background	Text	Ripple	Use Case
`default`	Primary blue	White	Light overlay	Main actions, CTAs
`destructive`	Red	White	Light overlay	Delete, remove actions
`outline`	Transparent	Primary	Primary tint	Secondary actions
`secondary`	Muted	Primary	Primary tint	Subtle actions
`ghost`	Transparent	Primary	Primary tint	Minimal interactions

Size Specifications

Size	Height	Padding	Ripple Scale	Use Case
`sm`	36px	12px 16px	8x	Compact interfaces, inline actions
`default`	40px	16px 24px	10x	Standard buttons, forms
`lg`	44px	20px 32px	12x	Hero sections, primary CTAs
`icon`	40px × 40px	8px	10x	Icon-only actions, toolbars

Common gotchas

Ripple overflow issues: The button uses overflow: hidden to contain ripples, but parent containers with overflow: visible might show ripples bleeding out. Ensure proper container styling for clean boundaries.

Performance with rapid clicking: Multiple rapid clicks create overlapping ripples that can impact performance on low-end devices. The component handles cleanup, but consider debouncing for very high-frequency interactions.

Touch vs mouse coordinates: Touch events and mouse events report coordinates differently. The component normalizes these, but custom click handlers should be aware of the event type differences.

Ripple color inheritance: Ripple colors are calculated from the button variant's theme colors. Custom button colors might need corresponding ripple color overrides via the rippleClassName prop.

Animation interruption: If the button is unmounted during a ripple animation, cleanup might not complete properly. This is rare but can happen in dynamic interfaces with conditional rendering.

Z-index layering: Ripples are positioned absolutely within the button but can interfere with child elements that have their own positioning. Keep button content simple or adjust z-index values carefully.

Explore other interactive button components for React applications:

React Ripple Button

Ripple emanates from click position

Why most button feedback feels disconnected

Installation

Examples

Button Variants

Size Options

Features

Use Cases

API Reference

RippleButton

Variant Specifications

Size Specifications

Common gotchas

You might also like

Liquid Button

Icon Button

Flip Button

Copy Button

Questions developers actually ask

On this page

React Ripple Button