Morph Button React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import MorphButton from "./MorphButton";

export default function Example() {
  return (
    <MorphButton
      children={"Save changes"}
      status={"idle"}
      loadingLabel={"Saving changes"}
      successLabel={"Changes saved"}
      color={"#b8c1d4"}
      textColor={"#252b37"}
      width={190}
      disabled={false}
    />
  );
}

Using Morph Button

Run your action from onClick and set status to loading while it is pending. Change it to success when the action completes, or idle to show the label again.

Loading disables further activation and exposes aria-busy. Supply meaningful loadingLabel and successLabel values; the component does not start requests or set its own completion timer.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Idle action label.
status	"idle" \| "loading" \| "success"	No	"idle"	Caller-controlled visual state.
loadingLabel	string	No	"Loading"	Accessible loading-state label.
successLabel	string	No	"Completed"	Accessible success-state label.
color	string	No	"#b8c1d4"	Button surface colour.
textColor	string	No	"#252b37"	Label and icon colour.
width	number	No	190	Resting button width in pixels.
disabled	boolean	No	false	Disable the button independently of status.
onClick	function	No	undefined	Native click handler.
type	"button" \| "submit" \| "reset"	No	"button"	Native button type.
...rest	ButtonHTMLAttributes	No	undefined	Additional native attributes such as aria-label and form.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.