Countdown

data-display

Countdown timer displaying days, hours, minutes, seconds with optional labels. Token-driven colors, fonts, and segment styling.

Import

typescript
import { Countdown } from "packages/ui/src";

Props

CountdownProps

PropTypeRequired
targetDateDateYes
labelstringNo
onComplete() => void, showLabels?: booleanNo

Examples

Countdown

Countdown timer with days, hours, minutes, and seconds segments.

Launch Countdown

Product Launch
07Days
00Hours
00Minutes
00Seconds

Sale Ending

Sale Ends
00Days
23Hours
59Minutes
59Seconds

Without Labels

00
01
00
00

Metadata

Component Metadata
Familydata-display
FrameworksNext.js, Astro/EmDash
DescriptionCountdown timer displaying days, hours, minutes, seconds with optional labels. Token-driven colors, fonts, and segment styling.
PropsCountdownProps (targetDate: Date, label?: string, onComplete?: () => void, showLabels?: boolean)
Statesrunning, complete, with-label, without-labels
A11y
  • Container has role=timer
  • aria-label from label prop
  • Separators are aria-hidden
Responsive
  • Flex wrap for segments
  • Min-width per segment
Motion
  • Digits update every second via setInterval
Token Dependencies
  • components.countdown.bg
  • components.countdown.borderColor
  • components.countdown.borderRadius
  • components.countdown.padding
  • components.countdown.gap
  • components.countdown.digitColor
  • components.countdown.digitFontSize
  • components.countdown.labelColor
  • components.countdown.labelFontSize
  • components.countdown.separatorColor
  • components.countdown.separatorFontSize
Content Slotslabel (string), digit segments
CMS Bindings
  • Target date from CMS datetime field
Test Cases
  • Renders four segments
  • Has role=timer
  • Shows label when provided
  • Shows digit labels by default
  • Hides labels when showLabels=false
  • Shows colons between segments
  • Digits are zero-padded
  • Passes className through