ComponentsData display

SLA timer

A live countdown to a service-level deadline — first response, resolution, delivery window, approval. It turns at-risk and breached on its own, freezes as met or missed once the target is reached, pauses while you wait on the customer, and reads as a full sentence to screen readers.

WAI-ARIA timer role components/sla-timer.tsxtheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { SlaTimer } from "@vamos-ui/react";

<SlaTimer label="First response" start={ticket.createdAt} due={ticket.firstResponseDue} />
<SlaTimer variant="bar" label="Resolution" start={ticket.createdAt} due={ticket.resolveDue} completedAt={ticket.solvedAt} />

Durations come from the locale formatter: "1h 35m" in English, "1 sa. 35 dk." in Turkish.

role="timer" is not a live region, so the ticking never floods a screen reader.

Examples

States

On track → at risk (under warnAt of the window, default 25%) → breached; met / missed / paused are frozen.

On track
At risk (under 25% left)
Breached
Paused (waiting on customer)
Met
Missed

Bar (ticket side panel)

variant="bar" shows how much of the window is used.

SLA · Urgent

Support inbox

Badges in a queue list; a fixed now keeps rows stable while the list renders.

Webhook deliveries failing with 401
#4814 · Nur Şimşek
Urgent
Staff can't log in with SSO since this morning
#4812 · Femke de Vries
High
Help importing 3,000 contacts from a spreadsheet
#4817 · Mads Kjær
Normal
Return label never arrived
#4809 · Harriet Moss
Low

API

SlaTimer

Prop	Type	Default
`due` Deadline.	`string \| number \| Date`	`—`
`start` When the clock started — enables the proportional warning and the bar fill.	`string \| number \| Date`	`—`
`completedAt` Target reached → met / missed, frozen.	`string \| number \| Date \| null`	`—`
`pausedAt` Clock stopped → paused, frozen.	`string \| number \| Date \| null`	`—`
`now` Fixed epoch ms for static screens and tests. Omit to tick (every second in the last hour, every 15 s before).	`number`	`—`
`warnAt` At risk below this share of the window (needs start). Without start: 30 minutes.	`number`	`0.25`
`warnMinutes` At risk below this many minutes (overrides warnAt).	`number`	`—`
`variant` Pill, icon + text, or label row with a progress line.	`"badge" \| "inline" \| "bar"`	`"badge"`
`label` What is measured; prefixes the accessible sentence ("First response: Due in 12m").	`string`	`—`
`seconds` Seconds under an hour left.	`boolean`	`true`
`hideIcon` Badge / inline without the icon.	`boolean`	`—`
`labels` Dictionary namespace "slaTimer": dueIn, overdue, met, missed, paused, pausedOverdue and the state names.	`Partial<SlaTimerLabels>`	`—`

slaState(input)

Prop	Type	Default
`input` Pure model for sorting or filtering queues.	`{ due, start?, completedAt?, pausedAt?, now, warnAt?, warnMinutes? }`	`—`
`returns` state: on-track \| at-risk \| breached \| met \| missed \| paused.	`{ state, remaining (ms), used (0…1 \| null) }`	`—`

Skeleton

Slider