Button - Morph

The ButtonMorph component is a highly customizable button that can morph styles, handle interactions, and adapt to different use cases.

Live Preview

Open in

Gsap

Import

import { ButtonMorph } from "@/components/ui/button-morph"

Default Example

<ButtonMorph 
  title="Click Me" 
  onClick={() => alert("Morphing Button!")} 
/>

Morphing Shape Example

<ButtonMorph 
  title="Morph to Circle" 
  morphTo="circle" 
  className="bg-pink-600 text-white px-4 py-2" 
/>

Loading Example

<ButtonMorph 
  title="Processing..." 
  loading 
  className="bg-green-600 text-white px-4 py-2" 
/>

Submit Button Example

<form onSubmit={(e) => { e.preventDefault(); alert("Form submitted with morph!"); }}>
  <ButtonMorph 
    title="Submit" 
    type="submit" 
    morphTo="square" 
    className="bg-blue-600 text-white px-6 py-2 rounded-md" 
  />
</form>