Ripple Button

"use client"

import {
  RippleButton,
  RippleButtonRipples,
} from "@animate-ui/react/primitives/buttons/ripple"

export default function RippleButtonDemo({
  tapScale = 0.97,
}: {
  tapScale?: number
}) {
  return (
    <RippleButton
      tapScale={tapScale}
      className="bg-primary text-primary-foreground h-10 rounded-lg px-4 text-sm font-medium [--ripple-button-ripple-color:var(--primary-foreground)]"
    >
      Ripple Button
      <RippleButtonRipples />
    </RippleButton>
  )
}

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import {
  RippleButton,
  RippleButtonRipples,
} from '@animate-ui/react/primitives/buttons/ripple';

export function Send() {
  return (
    <RippleButton className="[--ripple-button-ripple-color:white]">
      Send
      <RippleButtonRipples />
    </RippleButton>
  );
}

AnimationCopy Anchor Link

• Each click sends a ripple from the pointer: it grows to scale while fading out over 0.6s, then is removed. Rapid clicks each get their own ripple.
• Pressing scales the button to tapScale (0.97), on Motion's spring for scale (stiffness: 550, damping: 30). It doesn't scale on hover, unless you set hoverScale.
• <AnimateUIProvider tempo> paces the default spring and ripple.
• Under reduced motion, the ripple fades in place without growing, and the button doesn't scale.

API ReferenceCopy Anchor Link

RippleButtonCopy Anchor Link

RippleButtonRipplesCopy Anchor Link

CSS variablesCopy Anchor Link