ActionButton

A compact button for frequent actions that runs async work and confirms in place: the arrow gives way to a spinner, then a drawn check, then the button resets.

When to use

• Save, publish, deploy or sync actions that take a moment and should confirm themselves without a toast.
• Frequent toolbar or form-footer actions where the result is obvious from the label ("Saved", "Deployed").
• For a plain action with no pending/success phases, use Button. For destructive actions that need a confirmation step, use ConfirmMorph or HoldToConfirm.

Usage

import { ActionButton } from "@/components/iris/action-button/action-button";

<ActionButton
  label="Create preview"
  pendingLabel="Creating"
  successLabel="Created"
  onAction={() => api.createPreview("shop")}
  onActionError={(error) => toast.error("Could not create the preview database")}
/>;

Props

Prop	Type	Default	Description
label	string	—	Resting label (required). Also the accessible name.
onAction	() => void | Promise<void>	—	Work to run on press (required). A promise keeps the button pending until it settles.
pendingLabel	string	"Saving"	Label while onAction is pending.
successLabel	string	"Saved"	Label after onAction resolves.
resetAfterMs	number	2400	Delay before returning to idle after success. 0 keeps the success state.
onActionError	(error: unknown) => void	—	Called when onAction rejects; the button returns to idle.
disabled	boolean	—	Native disabled.
...props	ButtonHTMLAttributes	—	Other native attributes (type defaults to "button"). onClick is not accepted — use onAction.

Notes

• Exposes data-state="idle" | "pending" | "success" for styling hooks.
• Pending stays focusable (aria-disabled, aria-busy), and a visually hidden live region (<output>) announces the pending and success labels.
• Repeated presses while pending are ignored.
• Reduced motion swaps the slide, blur and drawn-check animations for instant fades.