Countdown Button

Component countdown-button-demo not found in registry.

Installation

Usage

import CountdownButton from "@/components/ruixen/countdown-button";
 
export default function App() {
  const handleSendCode = () => {
    console.log("Verification code sent!");
    // Your code sending logic here
  };
 
  const handleResendEmail = () => {
    console.log("Email resent!");
    // Your email resending logic here
  };
 
  return (
    <div className="space-y-4">
      {/* OTP/Verification code button */}
      <CountdownButton
        label="Send Code"
        countdown={60}
        onClick={handleSendCode}
        size="md"
      />
 
      {/* Email resend button */}
      <CountdownButton
        label="Resend Email"
        countdown={30}
        onClick={handleResendEmail}
        size="sm"
        className="bg-blue-500 hover:bg-blue-600"
      />
 
      {/* Large button with longer countdown */}
      <CountdownButton
        label="Request Support"
        countdown={300}
        onClick={() => console.log("Support requested")}
        size="lg"
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`label`	`string`	-	Button text
`countdown`	`number`	-	Countdown duration in seconds
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Button size
`onClick`	`() => void`	-	Click handler function
`className`	`string`	-	Additional CSS classes

Features

Automatic Countdown: Shows remaining time in seconds
Disabled State: Button disabled during countdown
Auto Re-enable: Automatically becomes clickable after countdown
Size Variants: Small, medium, and large sizes
Custom Styling: Supports additional CSS classes
Real-time Updates: Updates every second

Size Variants

// Small button
<CountdownButton size="sm" label="Send" countdown={30} />
 
// Medium button (default)
<CountdownButton size="md" label="Send Code" countdown={60} />
 
// Large button
<CountdownButton size="lg" label="Request Callback" countdown={120} />

Button States

Active State

Shows original label text
Clickable and responsive to user interaction
Normal button styling

Countdown State

Shows {label} in {timeLeft}s format
Disabled and non-interactive
Muted appearance to indicate disabled state

Common Use Cases

OTP/Verification Codes

<CountdownButton
  label="Send Verification Code"
  countdown={60}
  onClick={sendOTP}
/>

Email Resending

<CountdownButton label="Resend Email" countdown={30} onClick={resendEmail} />

Rate Limited Actions

<CountdownButton
  label="Submit Feedback"
  countdown={300}
  onClick={submitFeedback}
/>

Use Cases

Perfect for:

OTP Systems: Prevent spam verification requests
Email Verification: Limit resend frequency
API Rate Limiting: Prevent excessive API calls
Form Submissions: Prevent duplicate submissions
Support Requests: Limit support ticket creation