Installation
Usage
import { MorphingButton } from "@/components/ui/morphing-button";<MorphingButton variant="expand" size="md">
Click Me
</MorphingButton>
<MorphingButton
variant="liquid"
size="lg"
icon={<SomeIcon />}
>
Liquid Effect
</MorphingButton>
<MorphingButton
variant="bounce"
iconPosition="right"
icon={<ArrowIcon />}
>
Bounce Animation
</MorphingButton>
<MorphingButton
variant="rotate"
loading={isLoading}
disabled={isDisabled}
>
Submit
</MorphingButton>Props
Morphing Button
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | "expand" | Button transformation animation: "expand", "collapse", "rotate", "skew", "liquid", "bounce" |
size | string | "md" | Button size: "xs", "sm", "md", "lg", "xl" |
icon | React.ReactNode | undefined | Optional icon element to display in the button |
iconPosition | string | "left" | Position of the icon relative to button text: "left", "right", "only" |
className | string | "" | Additional CSS classes to apply |
disabled | boolean | false | Disables the button and prevents interaction |
loading | boolean | false | Indicates that the button is in a loading state |
children | React.ReactNode | undefined | Button content |