Icon Morph Button

Each stroke moves along its own path on a spring, so the change reads as one object changing its mind. Pairs: menu-close, play-pause, plus-minus, arrow-check.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add icon-morph-button

Usage

Example

import { IconMorphButton } from "@/components/galactrex/icon-morph-button";

<IconMorphButton pair="menu-close" labels={["Open menu", "Close menu"]} active={open} onChange={setOpen} aria-expanded={open} />

Source

Installs to components/galactrex/icon-morph-button.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`pair`	`"menu-close" \| "play-pause" \| "plus-minus" \| "arrow-check"`	—	Which two icons.
`labels`	`[string, string]`	—	Names for the two states.
`active / defaultActive`	`boolean`	—	Controlled or initial state.
`onChange`	`(active: boolean) => void`	—	On toggle.
`size`	`number`	`22`	Icon size in px.

Variants

Menu. With aria-expanded from your menu state.
Player. play-pause for media.

Accessibility

Its accessible name follows the state.

Motion and reduced motion

SVG path interpolation per stroke on a spring.
Reduced motion: icons swap.