Skip to content
EspañolEnglish
All components (244)

Live clock

Dates and time · LiveClock

What it is and when to use it

The time, live: the one in the header of a dashboard, the one in a meeting room, the one in another city next to your own.

When to use it

  • A time that has to be on screen and up to date: the header of a dashboard, the screen of a room, the clock of a till.
  • timeZone for the time somewhere else ("Europe/Madrid", "America/Bogota"): a distributed team sees each person's time next to their name.
  • seconds={false} when the seconds are too much: it changes once a minute.
  • date puts the date in front, short (short) or long (long).

When not to

  • The time something happened at: RelativeTime ("3 minutes ago") or the written date.
  • What is left until something: Countdown.

Keyboard: it is not interactive.

Accessibility: it is a <time> with the full date in dateTime and in its title, with the zone. Each change is not announced, which would be unbearable; label ("Time in Madrid") goes in front for whoever finds it with the reader. It ticks on the dot by reading the system clock, so it does not drift in a background tab and corrects itself on return.

Fine appearance: no variables of its own; size moves the font size and the digits are tabular (amset-clock).

What it looks like

<LiveClock timeZone="Europe/Madrid" label="Madrid" seconds date="long" />
<LiveClock timeZone="America/Mexico_City" label="Mexico City" hour12 size="sm" />
<LiveClock timeZone="Asia/Tokyo" label="Tokyo" date="short" />

Props

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

PropTypeWhat it does
classNamestringMerged with the library classes; it does not replace them.
dateClockDateThe date in front of the time: `short` ("27/10/2026") or `long` ("Monday, 27 October 2026"). Without this, only the time.
hour12boolean12 or 24 hour clock. Without this, whatever the language says (`es-ES` is 24).
labelstringWhich time this is, for whoever hears it without seeing what is around it: "Time in Madrid".
secondsbooleanWith seconds (by default, it changes every second) or only hours and minutes, which changes once a minute.
size"sm" | "md" | "lg"Font size: `sm`, `md` (default) or `lg`.
timeZonestringThe IANA time zone ("Europe/Madrid", "America/Bogota"). Without it, the browser one. One that does not exist is ignored and reported in the console.

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: