A label with an icon chip. On hover the icon slides out while a second icon slides in and crossfades.
npx shadcn@latest add https://hyperblur.dev/r/icon-morph-button.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/icon-morph-button.tsx.
import { IconMorphButton } from "@/components/hyperblur/icon-morph-button"
<IconMorphButton icon="download">Download</IconMorphButton>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Button label. |
| icon | "arrow" | "download" | "external" | "plus" | "arrow" | Icon shown at rest. |
| hoverIcon | "arrow" | "download" | "external" | "plus" | "check" | Icon shown on hover. Defaults to a check, or an arrow for the external icon. | |
| color | string | "#2f7bff" | Icon chip, hover tint and focus ring color. |
| rounded | number | 9999 | Corner radius in pixels. The default makes a pill. |
| size | "sm" | "md" | "lg" | "md" | Font size and padding preset. |