blue
View on GitHub

Timer

Timer counts down to a deadline, then shows the overdue duration in the danger color.

Usage

Pass deadline as an ISO date string or epoch milliseconds. The default text display uses a compact duration such as “2d 4h left”. After the deadline passes, it changes to text such as “Overdue by 35m” and uses the danger color. An empty or invalid deadline displays a dash placeholder.

Light
Blue
Zoho Puvi
Respond by 6h 24m left 
<script>
	import { Timer } from 'deskblocks';

	const inSixHours = Date.now() + 6.4 * 60 * 60 * 1000;
</script>

<Timer label="Respond by" deadline={inSixHours} />

Overdue

Light
Blue
Zoho Puvi
Resolution due Overdue by 1d 2h 
<Timer label="Resolution due" deadline={yesterday} />

Clock display

Set display="clock" for a live HH:MM:SS countdown. Durations longer than 24 hours include a day prefix. Once overdue, the timer counts up from the deadline and adds a minus sign.

Light
Blue
Zoho Puvi
Due in 01:35:00 
<Timer label="Due in" deadline={soon} display="clock" />

Props

deadline string | number | null | undefined undefined Deadline as an ISO date string or epoch milliseconds.
display ‘text’ | ‘clock’ 'text' Displays a compact text duration or a live clock that updates every second.
label string 'Due in' The small label rendered above the value.
class string undefined Custom CSS class name for additional styling.

Events

None.

Accessibility

The component uses role="timer" and combines the label with the current value for its accessible name.