Stateful message button — React Component

Animated async button with idle → loading → success transitions, built-in click guarding, and smooth icon/text motion.

Motion Effectsspringhoverbuttonformsasyncloadingsuccess

Stateful message button

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

loadingText

Label shown in loading phase.

successText

Label shown in success phase.

errorText

Label shown in error phase.

resetDelay

Auto-reset delay after success/error (ms).

showSuccess

If false, returns to idle after action completes.

variant

Visual style variant.

size

Button size preset.

disabled

Disables interaction (in addition to loading lock).

Generated JSX

Copy this into your page.

<CheckCircle2
  loadingText="Loading..."
  successText="Success"
  errorText="Something went wrong"
  resetDelay={1800}
  showSuccess={true}
  variant="default"
  size="md"
  disabled={false}
/>

Animation effects

springhover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About Stateful message button

The Stateful Message Button transitions through idle, loading, success, and error states using Framer Motion layout animations. Text and icon transitions between states keep the button width stable to prevent layout shift. The success checkmark and error cross animate in with spring physics. It accepts a standard onClick async function and manages its own state machine internally, making it a direct drop-in for any form submission or API action button in a Next.js application.

Common use cases

Form submit and save buttons
API action and mutation buttons
File upload and download triggers
Async operation initiators

Installation