Stateful Button

FreeNewSample

Idle, loading, success and error in one control. Width animates between labels so layouts never jump, and screen readers hear every outcome.

Original

buttons
feedback
forms

Customize

Accent

Radius12px

Motion

Speed

These controls show a few ways to adapt it. The source is fully editable.

Install

Not published yet

npx shadcn@latest add @uicoolkit/stateful-button

Install commands go live when this item ships to the registry.

Dependencies

motion

Use with an agent

Copy a prompt with this component, your current preview settings and links to its docs.

Add the UICoolKit "Stateful Button" component (stateful-button) to this project.
Docs: https://uicoolkit.com/components/stateful-button
Agent docs: https://uicoolkit.com/components/stateful-button.md
Install: npx shadcn@latest add @uicoolkit/stateful-button
Preview settings to match: accent Ember, radius 12px, motion on.
Use the documented props and className hooks rather than editing internals, and wire it to this app's real state.
(Note: this is a sample item from the UICoolKit website shell and is not published yet.)

stateful-button.tsx

<StatefulButton
  action={saveChanges}
  labels={{ idle: "Save changes", success: "Saved" }}
/>

Prop	Type	Default
`action` Runs on click. Resolving shows success; rejecting shows error.	`() => Promise<unknown>`	`—`
`status` Control the state from your own data instead.	`"idle" \| "loading" \| "success" \| "error"`	`—`
`labels` Replace the label or icon for any state.	`Partial<Record<Status, ReactNode>>`	`—`
`className` Merged onto the root after defaults, so consumer styles win.	`string`	`—`
`motion` Disable animation or tune duration, easing and spring values. Reduced motion is honored by default.	`boolean \| MotionOptions`	`true`

Every part accepts className, and consumer classes are merged last so they win. Control state from your own data, replace any content, and tune or disable motion.

A substantially restyled instance

<StatefulButton
  className="rounded-none border-2 border-black bg-yellow-300 font-mono"
  motion={{ duration: 0.2 }}
/>