Ripple Button

Interactive button with animated ripple effects and multiple variants. Perfect for React applications requiring engaging button interactions with Next.js integration and TypeScript support.

Framer Motion

Class Variance Authority

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 };

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

Features

Animated ripple effects that originate from click position with customizable scale and timing
Multiple button variants including default, destructive, outline, secondary, and ghost styles
Size variations with responsive scaling (sm, default, lg, icon) using class-variance-authority
Motion interactions with hover and tap scale effects using Framer Motion
TypeScript support with complete interface definitions and variant types
shadcn/ui integration using design tokens and utility classes
Customizable animations with configurable transition duration and easing

Examples

Button Variants

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 };

Use Cases

This free open source React component works well for:

Call-to-action buttons - Primary actions and form submissions built with Next.js
Interactive dashboards - Action buttons with visual feedback using TypeScript and Tailwind CSS
E-commerce interfaces - Add to cart, purchase, and navigation buttons with shadcn/ui
Gaming interfaces - Interactive buttons that provide satisfying visual feedback for React applications

API Reference

RippleButton

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

Button Variants

default - Primary blue button with white text
destructive - Red button for destructive actions
outline - Bordered button with transparent background
secondary - Muted background with secondary styling
ghost - Minimal button with hover effects only

Size Variants

sm - Small button (36px height) with reduced padding
default - Standard button (40px height) with normal padding
lg - Large button (44px height) with increased padding
icon - Square button (40x40px) for icon-only usage

Implementation Notes

Ripple effects are automatically positioned at click coordinates
Uses CSS overflow hidden to contain ripple animations within button bounds
Ripple elements are automatically cleaned up after animation completes
Compatible with all standard button props and accessibility features
Built with class-variance-authority for consistent variant management
Integrates seamlessly with shadcn/ui design system and motion/react

Reactripple-button

Reactripple-button

On this page