Stateful Button

buttons

Multi-stage interactive button supporting idle, loading spinner, and success state animation.

#button#stateful#loading#async

Live Interactive Preview

Component Source Code

Select language in the dropdown

StatefulButton.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Loader2, Check, Send } from 'lucide-react';
5
6export default function StatefulButton() {
7  const [state, setState] = useState<'idle' | 'loading' | 'success'>('idle');
8
9  const handleClick = () => {
10    if (state !== 'idle') return;
11    setState('loading');
12    setTimeout(() => {
13      setState('success');
14      setTimeout(() => setState('idle'), 2200);
15    }, 1500);
16  };
17
18  return (
19    <button
20      onClick={handleClick}
21      disabled={state === 'loading'}
22      className="relative flex h-12 min-w-[160px] items-center justify-center rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 font-semibold text-sm text-white shadow-lg shadow-blue-500/25 transition-all hover:scale-105 active:scale-95 disabled:opacity-80"
23    >
24      {state === 'idle' && (
25        <span className="flex items-center gap-2">
26          <span>Deploy Project</span>
27          <Send className="h-4 w-4" />
28        </span>
29      )}
30      {state === 'loading' && (
31        <span className="flex items-center gap-2">
32          <Loader2 className="h-4 w-4 animate-spin" />
33          <span>Deploying...</span>
34        </span>
35      )}
36      {state === 'success' && (
37        <span className="flex items-center gap-2 text-emerald-300 font-bold animate-in fade-in zoom-in">
38          <Check className="h-4 w-4" />
39          <span>Deployed!</span>
40        </span>
41      )}
42    </button>
43  );
44}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/buttons/StatefulButton.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import StatefulButton from '@/components/buttons/StatefulButton';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <StatefulButton />
7    </main>
8  );
9}