Stateful message button

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

Installation