Overview
The <x-aura::countdown> component renders a countdown timer that ticks down in real time. It can count down to a specific datetime or from a given number of seconds. The display supports configurable sizes, custom separators, and optional text labels for each time unit.
Basic Usage
days
:
hrs
:
min
:
sec
<x-aura::countdown :seconds="3600" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
target |
string|null |
null |
Target datetime string (ISO 8601 format, e.g., 2026-12-31T23:59:59). |
seconds |
int|null |
null |
Number of seconds to count down from. Used when target is not set. |
size |
string |
'md' |
Display size: sm, md, lg. |
separator |
string |
':' |
Character displayed between time units. |
labels |
bool |
true |
Show text labels (Days, Hours, Minutes, Seconds) below each unit. |
Variants / Examples
Countdown to Date
days
:
hrs
:
min
:
sec
<x-aura::countdown target="2026-12-31T23:59:59" />
Countdown from Seconds
days
:
hrs
:
min
:
sec
days
:
hrs
:
min
:
sec
days
:
hrs
:
min
:
sec
<x-aura::countdown :seconds="90" size="sm" />
<x-aura::countdown :seconds="3661" size="md" />
<x-aura::countdown :seconds="86400" size="lg" />
Without Labels
<x-aura::countdown :seconds="7200" :labels="false" separator=" : " />
Event Launch Timer
Event starts in
days
:
hrs
:
min
:
sec
<div class="text-center">
<p class="text-sm text-aura-surface-500 mb-4">Event starts in</p>
<x-aura::countdown target="2026-06-15T09:00:00" size="lg" />
</div>
Accessibility
- Each time unit has an
aria-labeldescribing its value (e.g., "12 hours"). - The component uses
role="timer"to indicate a live countdown region. - Labels provide a visual description of each unit, supplementing the numeric display.