Pro

Cooldown button

A button that has to rest after it is used: resend a code, retry a payment, nudge a teammate. A fill drains across it while a clock counts down, and it stays focusable while it waits, so the keyboard never loses its place.

Pro

pnpm dlx shadcn@latest add @caliper/cooldown-button

Check your email

We sent a six-digit code to maya@example.com.

Code sent.

Installs components/ui/cooldown-button.tsxDepends on none beyond ReactMotion shared motion tokens

When to use

Use it for

Sending codes and emails that the server rate-limits.
Retries that should not be hammered.

Skip it when

Waits longer than a few minutes; say when it will be possible instead.
Disabling a form for validation; explain the problem instead.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

aria-disabled, not disabled: A disabled button drops focus; this one refuses presses but stays in the tab order and says how long the wait is once.
Can start resting: startCooling begins the wait on mount, for the page that opens right after a code was sent.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/cooldown-button

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { CooldownButton } from "@/components/ui/cooldown-button"

The worked example comes with Pro

The 29-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

CooldownButton

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

label *string—What pressing does: "Resend code".

secondsnumber30How long it rests after a press.

waitingLabel((left: number) => string)(left) => `${label} in ${clock(left)}`The words while resting, given the seconds left.

startCoolingbooleanfalseStart resting, e.g. when the page opens straight after a code was sent.

It is built on native elements and keeps aria-disabled and aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.