Morph Button

Click it and it widens into a field with its own submit; send and it shrinks into a thank-you. For sign-ups, invites, waitlists and quick feedback.

Install

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

Terminal

npx @galactrex/ui add morph-button

Usage

Example

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

<MorphButton label="Get early access" onSubmit={(email) => api.waitlist(email)} />

Source

Installs to components/galactrex/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
`label`	`string`	—	The button's words, and the field's label.
`placeholder`	`string`	`"[email protected]"`	Field placeholder.
`inputType`	`"email" \| "text" \| "url"`	`"email"`	Field type.
`submitLabel`	`string`	`"Send"`	Submit control.
`onSubmit`	`(value: string) => void \| Promise<void>`	—	Resolve for success; throw to show the error.
`doneLabel`	`string`	—	Shown once submitted.
`className`	`string`	—	Extra classes for the outer element.

Variants

Waitlist. Email in, thank-you out.
Invite. With `inputType="text"` for a handle.

Accessibility

The field is labelled; errors are announced and the field is marked invalid.
Escape folds the form back into the button.

Motion and reduced motion

Shared layout animation between the three states.
Reduced motion: states swap without travel.