Ripple Button Component

An interactive button with a ripple effect for modern UIs.

Features

Interactive ripple effect on mouse hover.
Customizable styles and colors.
Lightweight and reusable.

Installation

npx sona-ui@latest add ripple-button

Usage


interface LocalRippleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: ReactNode;
  scaleAmount?: number;
  className?: string;
  duration?: number;
  rippleStyle?: string;
}
 
interface RippleButtonEx1Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  buttonProps?: LocalRippleButtonProps;
  textProps?: RippleButtonTextProps;
  className?: string;
} 
 
export default function RippleButtonExample({
  textProps,
  buttonProps,
  className,
  ...props
}: RippleButtonEx1Props) {
  return (
    <RippleButton {...buttonProps}>
      <RippleButtonText {...textProps} text="Hover me!" />
    </RippleButton>
  );
};

Props

Property	Type	Default	Description
children	React.ReactNode	required	The content to be displayed inside the button.
scaleAmount	number	25	The scale amount for the ripple effect.
className	string	undefined	Additional CSS classes for the button.
duration	number	0.5	Duration of the ripple animation in seconds.
rippleStyle	string	undefined	Additional CSS classes for the ripple effect.