Morph Button
A button that smoothly morphs between different sizes, shapes, and content using layout animations.
Interactive preview · desktop · dark
Installation
Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.
Usage
Import it, pass your props, and make it part of your product.
example.tsx
import { ButtonWithMorph } from '@/components/component-kit/items/button-with-morph';
export function Example() { return ( <ButtonWithMorph aria-label="Create project" collapsedContent="+" expandedContent="Create project" /> );}Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | default | Pill height: 28, 32 or 36px. |
collapsedContent | ReactNode | — | Content in the compact state. |
expandedContent | ReactNode | — | Content in the expanded state. |