Dowe

DISPLAY

Countdown

Countdown renders time remaining until a target instant with consistent units, labels, separators, and target-owned ticking behavior.

TIME-BASED UI

Make the deadline visible

Use explicit unit flags and labels when the context is not a generic timer.

PLAYGROUND

Compose a launch timeline

The same target instant can be presented with different density and emphasis depending on where it appears in the product.

FULL TIMELINE

00Days00Hours00Minutes00Seconds

Show every unit when the deadline is far enough away to need calendar-scale context.

LAST MILE

00hrs00min00sec

Hide days when the audience is already inside the final delivery window.

Countdown target:"2030-01-01T00:00:00Z" size:"lg" variant:"outlined" scheme:"primary" daysLabel:"Days" hoursLabel:"Hours" minutesLabel:"Minutes" secondsLabel:"Seconds"
Countdown target:"2030-01-01T00:00:00Z" showDays:false showHours:true showMinutes:true showSeconds:true size:"xl" variant:"soft" scheme:"danger" hoursLabel:"hrs" minutesLabel:"min" secondsLabel:"sec"

ADVANCED PATTERNS

Tune units to the job

Countdown is useful for launches, handoffs, and limited windows when the authored labels explain exactly what the numbers mean.

EVENT

Launch day

00Days to launch

HANDOFF

Review window

00Hours left00Minutes left

MICRO

Final seconds

00Seconds remaining

Countdown target:"2030-01-01T00:00:00Z" size:"md" variant:"soft" scheme:"success" showDays:true showHours:false showMinutes:false showSeconds:false daysLabel:"Days to launch"
Countdown target:"2030-01-01T00:00:00Z" size:"md" variant:"outlined" scheme:"info" showDays:false showHours:true showMinutes:true showSeconds:false hoursLabel:"Hours left" minutesLabel:"Minutes left"
Countdown target:"2030-01-01T00:00:00Z" size:"sm" variant:"ghost" scheme:"warning" showDays:false showHours:false showMinutes:false showSeconds:true secondsLabel:"Seconds remaining"

TARGET

Use an ISO-like instant

The target is a quoted static date/time string. Keep the same instant in copied examples and server-owned workflow data.

COMPLETION

Dispatch onComplete

When the page needs a follow-up action, connect onComplete to an action name and let the target runtime own the ticking cadence.

API

Props

Countdown also accepts the applicable common spacing, sizing, border, visibility, and accessibility props.

Prop	Type	Default
No data There are no records to display

Previous Collapsible

Next Carousel

No data