Wave Button

A button with a wave animation on hover

Documentation

pnpm dlx @t7blocks/cli add wave-button

Usage

import { WaveButton } from "@/components/T7blocks/WaveButton";
export default function Home() {
  return (
    <div className="h-screen flex items-center justify-center">
      <WaveButton />
    </div>
  );
}

Properties

Property	Type	Default	Description
label	string	"Get Started"	Text label displayed on the button
onClick	() => void	undefined	Click event handler
bgColor	string	"#ffffff"	Background color of the button
animationDuration	number	500	Duration of the animation in milliseconds
width	number	"168px"	Width of the button
height	number	52	Height of the button
roundness	string	"26px"	Border-radius for the button
className	string	""	Additional CSS classes

Wave Button

Documentation

Usage

Properties

Inspiration

Related resources

Dot Launch Button

Knob Toggle