Ripple Button

Installation

showLineNumbers

import { RippleButton } from "@/components/ui/ripple-button"

showLineNumbers

<RippleButton>Click Me</RippleButton>

Prop	Type	Default	Description
`children`	`React.ReactNode`	`-`	The content of the button.
`className`	`string`	`-`	Additional class names for the button.
`rippleColor`	`string`	`#ffffff`	The color of the ripple effect.
`duration`	`string`	`600ms`	The duration of the ripple animation.
`onClick`	`(event: MouseEvent<HTMLButtonElement>) => void`	`-`	Click event handler.
…rest	`React.ButtonHTMLAttributes<HTMLButtonElement>`	`-`	All standard button HTML attributes are supported.

showLineNumbers

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

showLineNumbers

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