# Resend Timer

“Resend code” countdown for verification screens. As a link, ring or button that fills as time runs down and confirms with a check. It turns tappable at zero and can lock after too many tries.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/resend-timer
```

## Import

```tsx
import { formatResendTime, ResendTimer } from "@/components/ui/resend-timer/resend-timer";
```

## Variants

- `attempt-limit` — Attempt limit: `npx @lumioui/cli add pro/resend-timer-attempt-limit`
- `call-fallback` — Call me instead: `npx @lumioui/cli add pro/resend-timer-call-fallback`
- `email-link` — Email link: `npx @lumioui/cli add pro/resend-timer-email-link`
- `otp` — OTP inline: `npx @lumioui/cli add pro/resend-timer-otp`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `seconds?` | `number` | Countdown length in seconds. Default 30. |
| `onResend?` | `() => void | Promise<unknown>` | Fired on tap once the countdown ends. Return a promise to hold "Sending…". |
| `autoStart?` | `boolean` | Start counting on mount (the code was just sent). Default true. |
| `startKey?` | `string | number` | Change to restart the countdown from outside. |
| `maxAttempts?` | `number` | Resends allowed before the control locks. Default unlimited. |
| `appearance?` | `"link" | "button" | "ring"` | "link" — inline text (default); "button" — full-width pill; "ring" — icon disc with a depleting ring. |
| `label?` | `string` | Action label. Default "Resend code". |
| `countdownLabel?` | `(time: string, secondsLeft: number) => string` | Countdown copy. Default `${label} in 0:29`. |
| `prefix?` | `string` | Muted lead-in before the link, e.g. "Didn't get it?". Link appearance only. |
| `sendingLabel?` | `string` | — |
| `sentLabel?` | `string` | — |
| `limitLabel?` | `string` | Shown once `maxAttempts` is used up. |
| `icon?` | `IconName` | Glyph for button / ring appearances. Default "refresh". |
| `sentHold?` | `number` | How long the sent state holds before the clock restarts, in ms. Default 700. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

## Icons rendered

- `refresh` — /icons.html?i=refresh

Source: https://lumioui.com/components/resend-timer