Recipe: Button state machine

loading / disabled / success — a deterministic three-state toggle.

States

idleloadingsuccessdisabled

Transitions

idle ──[click]──▶ loading
loading ──[resolve]──▶ success
loading ──[reject]──▶ idle
success ──[timeout 2s]──▶ idle
disabled ──[enable]──▶ idle

Live preview

Save changes

Saving…

✓ Saved

Disabled

Tailwind recipe

// idle
bg-[#8B5CF6] text-white shadow-lg shadow-[#8B5CF6]/25

// loading
bg-[#8B5CF6]/60 text-white/70 cursor-wait

// success
bg-emerald-600 text-white shadow-lg shadow-emerald-600/25

// disabled
bg-gray-800 text-gray-500 cursor-not-allowed

Guard rules

1.Ignore clicks while loading or success is visible.
2.Auto-reset success after 2 seconds.
3.On reject, return to idle — never leave button stuck.