Future UI

Timeout Button

◉ Buttons

Confirmation button with GSAP-animated countdown timer and cancel support.

buttonconfirmtimeoutcountdownundoanimationgsap

No preview available

Click to arm ~ Click again to cancel

Controls

#ef4444
3

Buttons / React Component

About Timeout Button

Confirmation button with GSAP-animated countdown timer and cancel support.

Category Buttons
Framework React + TypeScript
Dependencies gsap, @gsap/react
Tags button, confirm, timeout, countdown, undo, animation, gsap

Install Timeout Button in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/timeout-button.json?key=YOUR_LICENSE_KEY"

Usage example

import { TimeoutButton } from './TimeoutButton';

export default function Example() {
  return (
    <TimeoutButton
      label="Delete"
      cancelLabel="Undo"
      doneLabel="Deleted"
      timeout={5}
      accentColor="#ef4444"
      onConfirm={() => console.log('Action confirmed!')}
    />
  );
}