Countdown

Usage

Overview

Countdown tells a person when the product will act automatically and gives them a visible way to keep the current state. The remaining time is always text.

When to use

A new call will open automatically after a short delay.
A session will sign out or move to an upgrade flow.
A reversible product transition needs a brief opportunity to remain in the current state.

When not to use

Elapsed time or a clock: use Time.
Work progressing toward completion: use Progress.
An unknown wait: use LoadingIndicator.
An irreversible action that needs explicit confirmation: use Confirmation.

Content

Provide message as one whole-phrase translation. Use its count for plural selection and interpolate the formatted seconds exactly once in forms that include the number; only that number rolls. A form that omits or repeats it renders intact as static body text. Label the control with the result of stopping the action, such as "Keep current call" or "Stay signed in." Avoid a generic "Cancel" label. Supply complete cancelledMessage and completedMessage lines for the states that replace the timer. Give related countdowns the same deadline when their normal-motion and reduced-motion presentations must tick together.

Copy Button / Accessibility

Countdown / API and Development

On this page

Countdown

Usage

Overview

Countdown tells a person when the product will act automatically and gives them a visible way to keep the current state. The remaining time is always text.

When to use

A new call will open automatically after a short delay.
A session will sign out or move to an upgrade flow.
A reversible product transition needs a brief opportunity to remain in the current state.

When not to use

Elapsed time or a clock: use Time.
Work progressing toward completion: use Progress.
An unknown wait: use LoadingIndicator.
An irreversible action that needs explicit confirmation: use Confirmation.

Content

Copy Button / Accessibility

Countdown / API and Development

On this page