Loading Button

While the work runs it spins and refuses repeat clicks, then ticks for success or shakes for failure and returns. The width eases between states.

Install

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

Terminal

npx @galactrex/ui add loading-button

Example

import { LoadingButton } from "@/components/galactrex/loading-button";

<LoadingButton onClick={() => api.save(draft)}>Save draft</LoadingButton>

Installs to components/galactrex/loading-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.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Label.
`onClick`	`(e) => Promise<unknown> \| unknown`	—	The work; pending shows progress.
`tone`	`"solid" \| "outline" \| "ghost"`	`"solid"`	Look.
`successLabel / errorLabel`	`ReactNode`	`"Done" / "Failed"`	Result labels.
`resultFor`	`number`	`1600`	Ms a result stays.
`...button props`	`ButtonHTMLAttributes`	—	onClick, disabled, type and the rest.