Skip to main content

​
Usage

The Ripple Button creates an elegant ripple effect on click, providing tactile feedback to users. The ripple animation emanates from the click point, creating a modern and polished interaction. 
<RippleButton @click="handleClick">
  Click Me
</RippleButton>

​
Props

Prop NameTypeDefaultDescription
classstring-Additional CSS classes for custom styling.
rippleColorstring"#ADD8E6"Color of the ripple effect.
durationnumber600Duration of the ripple animation in milliseconds.

​
Events

Event NameTypeDescription
clickeventClick event

​
Examples

​
Basic Usage

<RippleButton>
  Ripple Effect
</RippleButton>

​
Custom Ripple Color

<RippleButton rippleColor="#FF6B6B">
  Red Ripple
</RippleButton>

​
Custom Duration

<RippleButton :duration="1000">
  Slow Ripple
</RippleButton>

​
With Click Handler

<RippleButton 
  rippleColor="#4ECDC4" 
  :duration="800"
  @click="handleButtonClick"
>
  Submit
</RippleButton>

​
With Custom Styling

<RippleButton 
  class="bg-blue-500 text-white px-6 py-3 rounded-lg"
  rippleColor="#ffffff"
>
  Styled Button
</RippleButton>

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us