Morphy Button

A pill that morphs into a spinning circle while loading, then pops a drawn check on success.

status

successColor

Installation

npx shadcn@latest add @glint-ui/morphy-button

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/morphy-button.json

Usage

import { MorphyButton } from "@/components/ui/morphy-button";

const [status, setStatus] = useState<MorphyStatus>("idle");

<MorphyButton
  status={status}
  onClick={async () => {
    setStatus("loading");
    await save();
    setStatus("success");
  }}
>
  Save changes
</MorphyButton>

Props

Prop	Type	Default	Description
children	ReactNode	—	Button label.
status	"idle" \| "loading" \| "success"	"idle"	Visual state. The demo cycles it on click.
successColor	string	"#22c55e"	Fill color in the success state.
className	string	—	Extra classes for the root element.