ComponentsRipple Button

Ripple Button

A highly customizable button featuring a concentric waveform click animation and standard React pointer interactions.

Installation

$ nnpx @nehal712521/inprogress add ripple-button

Preview

Click button to see ripple effect (Clicks: 0)

Usage

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

export default function Page() {
    return (
        <RippleButton 
            buttonColor="#18181b" 
            textColor="#ffffff" 
            rippleColor="rgba(255, 255, 255, 0.3)"
        >
            Click Me
        </RippleButton>
    );
}

Props

Prop	Type	Default	Description
buttonColor	string	"#18181b"	Controls the background color.
textColor	string	"#ffffff"	Controls the text color.
rippleColor	string	"rgba(255, 255, 255, 0.3)"	Controls the concentric rings color.
...props	ButtonHTMLAttributes	-	Accepts standard HTML button props like onClick.