Todos los componentes (244)

Plazo de servicio

Gestión · SLAIndicator

Qué es y cuándo usarlo

Cuánto queda de un plazo de servicio (SLA), con la barra de lo gastado y la fase escrita: en plazo, por vencer, vencido, en pausa, cumplido o incumplido.

Cuándo usarlo

La primera respuesta a un cliente, la resolución de una incidencia, el plazo de una aprobación.
startedAt y dueAt son el comienzo y el vencimiento. Avisa cuando queda warnRatio del plazo (un cuarto por defecto).
pausedAt para un plazo que se para (a la espera del cliente, fuera de horario): el tiempo deja de correr en ese instante.
completedAt cuando ya se atendió: el plazo queda como cumplido o incumplido, con el margen o el retraso.
now fija el «ahora» a mano; sin él, el reloj del navegador, que sube por minutos.

Cuándo no

Una cuenta atrás de segundos: Countdown.
Un progreso de una tarea: Progress.
No decide nada por sí solo: avisar al equipo o escalar un plazo vencido lo hace el servidor.

Teclado: no tiene controles; es una barra de progreso con nombre.

Accesibilidad: la fase va escrita («Por vencer: quedan 1 h 30 min»), así que el color no es lo único que informa, y es el valor de la barra para el lector de pantalla. En el servidor no se pinta el tiempo, para que el HTML no lleve una hora que ya no vale.

Aspecto fino: la barra es la de Progress; el tono cambia con la fase. Un plazo vencido o incumplido pone el texto en el tono de error.

Cómo se ve

<SLAIndicator
  label="Responder al cliente"
  startedAt="2026-10-31T08:00:00Z"
  dueAt="2026-10-31T20:00:00Z"
/>
<SLAIndicator
  label="Devolución tramitada"
  startedAt={inicio}
  dueAt={limite}
  completedAt={cierre}
  size="sm"
/>

Props

Se importa con import { SLAIndicator } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`dueAt`obligatoria	`SlaMoment`	Cuando vence.
`label`obligatoria	`string`	Que plazo es («Primera respuesta al cliente»). Obligatorio.
`startedAt`obligatoria	`SlaMoment`	Cuando empezo a contar el plazo.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`completedAt`	`SlaMoment`	Si ya se atendio, cuando: el plazo queda como cumplido o incumplido segun llegue antes o despues de `dueAt`.
`now`	`Date`	El instante que se toma por «ahora». Sin esto, el reloj del navegador, que sube por minutos.
`pausedAt`	`SlaMoment`	Si el reloj esta parado desde este instante (a la espera del cliente, fuera de horario): el tiempo deja de correr.
`size`	`"sm" \| "md"`	—
`warnRatio`	`number`	Que parte del plazo tiene que quedar como mucho para avisar. Por defecto, 0,25.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: