Todos los componentes (244)

Reloj en vivo

Fechas y hora · LiveClock

Qué es y cuándo usarlo

La hora en vivo: la de la cabecera de un panel, la de una sala de reuniones, la de otra ciudad al lado de la propia.

Cuándo usarlo

Una hora que tiene que estar en pantalla y al día: la cabecera de un cuadro de mando, la pantalla de una sala, el reloj de una caja.
timeZone para la hora de otro sitio («Europe/Madrid», «America/Bogota»): un equipo repartido ve la hora de cada uno al lado de su nombre.
seconds={false} cuando los segundos sobran: cambia una vez por minuto.
date pone la fecha delante, corta (short) o larga (long).

Cuándo no

La hora a la que pasó algo: RelativeTime («hace 3 minutos») o la fecha escrita.
Lo que queda para algo: Countdown.

Teclado: no es interactivo.

Accesibilidad: es un <time> con la fecha completa en dateTime y en su title, con la zona. No se anuncia cada cambio, que sería insoportable; label («Hora en Madrid») va delante para quien lo encuentra con el lector. Avanza en punto leyendo el reloj del sistema, así que no se desvía en una pestaña de fondo y se corrige al volver.

Aspecto fino: sin variables propias; size mueve el cuerpo de letra y las cifras van tabulares (amset-clock).

Cómo se ve

<LiveClock timeZone="Europe/Madrid" label="Madrid" seconds date="long" />
<LiveClock timeZone="America/Mexico_City" label="Ciudad de México" hour12 size="sm" />
<LiveClock timeZone="Asia/Tokyo" label="Tokio" date="short" />

Props

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

Prop	Tipo	Para qué sirve
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`date`	`ClockDate`	La fecha delante de la hora: `short` («27/10/2026») o `long` («lunes, 27 de octubre de 2026»). Sin esto, solo la hora.
`hour12`	`boolean`	Reloj de 12 o de 24 horas. Sin esto, lo que diga el idioma (`es-ES` son 24).
`label`	`string`	Que hora es esta, para quien la oye sin ver lo que tiene alrededor: «Hora en Madrid».
`seconds`	`boolean`	Con segundos (por defecto, cambia cada segundo) o solo horas y minutos, que cambia una vez por minuto.
`size`	`"sm" \| "md" \| "lg"`	Cuerpo de letra: `sm`, `md` (por defecto) o `lg`.
`timeZone`	`string`	La zona horaria IANA («Europe/Madrid», «America/Bogota»). Sin ella, la del navegador. Una que no existe se ignora y se dice en consola.

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: