# Morph Button

> A button that becomes the form it stands for.

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.

- Family: Buttons
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/morph-button/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add morph-button
```

It installs to `components/galactrex/morph-button.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | The button's words, and the field's label. |
| `placeholder` | `string` | `"you@example.com"` | 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

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