All components (244)

Service deadline

Management · SLAIndicator

What it is and when to use it

How much is left of a service deadline (SLA), with the bar of what is spent and the phase written out: on time, due soon, overdue, paused, met or missed.

When to use it

The first response to a customer, the resolution of an incident, the deadline of an approval.
startedAt and dueAt are the start and the deadline. It warns when warnRatio of the deadline is left (a quarter by default).
pausedAt for a deadline that stops (waiting for the customer, outside working hours): time stops running at that instant.
completedAt once it has been handled: the deadline is left as met or missed, with the margin or the delay.
now sets the "now" by hand; without it, the browser clock, which goes up by minutes.

When not to

A countdown in seconds: Countdown.
The progress of a task: Progress.
It decides nothing on its own: warning the team or escalating an overdue deadline is done by the server.

Keyboard: it has no controls; it is a named progress bar.

Accessibility: the phase is written out ("Due soon: 1 h 30 min left"), so colour is not the only thing that informs, and it is the value of the bar for the screen reader. On the server the time is not painted, so the HTML does not carry an hour that is no longer valid.

Fine appearance: the bar is that of Progress; the tone changes with the phase. An overdue or missed deadline puts the text in the error tone.

What it looks like

<SLAIndicator
  label="Reply to the customer"
  startedAt="2026-10-31T08:00:00Z"
  dueAt="2026-10-31T20:00:00Z"
/>
<SLAIndicator
  label="Return processed"
  startedAt={inicio}
  dueAt={limite}
  completedAt={cierre}
  size="sm"
/>

Props

Import it with import { SLAIndicator } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`dueAt`required	`SlaMoment`	When it is due.
`label`required	`string`	Which deadline it is («First response to the customer»). Required.
`startedAt`required	`SlaMoment`	When the deadline started counting.
`className`	`string`	Merged with the library classes; it does not replace them.
`completedAt`	`SlaMoment`	If it has already been handled, when: the deadline is left as met or missed depending on whether it arrives before or after `dueAt`.
`now`	`Date`	The instant taken as "now". Without it, the browser clock, which goes up by minutes.
`pausedAt`	`SlaMoment`	If the clock has been stopped since this instant (waiting for the customer, outside working hours): time stops running.
`size`	`"sm" \| "md"`	—
`warnRatio`	`number`	How much of the deadline has to be left at most to warn. 0.25 by default.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: