Ripple Button

<script setup lang="ts">
import { RippleButton, RippleButtonRipples } from '@animate-ui/vue/primitives/buttons/ripple'

withDefaults(defineProps<{ tapScale?: number | string }>(), { tapScale: 0.97 })
</script>

<template>
  <RippleButton
    :tap-scale="Number(tapScale)"
    class="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>
</template>

InstallationCopy Anchor Link

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

UsageCopy Anchor Link

<script setup lang="ts">
import { RippleButton, RippleButtonRipples } from '@animate-ui/vue/primitives/buttons/ripple';
</script>

<template>
  <RippleButton class="[--ripple-button-ripple-color:white]">
    Send
    <RippleButtonRipples />
  </RippleButton>
</template>

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 tap-scale (0.97), on Motion's spring for scale (stiffness: 550, damping: 30). It doesn't scale on hover, unless you set hover-scale.
• <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