RelativeTime

A time like 3 days ago, with the exact date on hover.

Source

Relative dates

Use relative dates for recent activity, such as posts and events. Hover over a time, tap it, or press Enter on it to see the exact local and UTC times.

Seconds ago
Minutes ago
Yesterday
Days ago
Years ago

Date format

Use format="date" when the day matters more than the age, such as a release date. The locale sets the date format.

en-US (default)
fr-FR

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

  • Pass an ISO string with a time zone, or a timestamp, so the date is not ambiguous.
  • The first render shows an absolute date in UTC. The relative text appears after the page loads.
  • Set tooltip={false} where the exact time popup would get in the way.

API

RelativeTime is a site component. It accepts native time element props, except children and dateTime.

RelativeTime

PropTypeDefaultDescription
dateDate | string | number–The date to show. Required. Numbers are milliseconds since the Unix epoch.
localestring'en-US'Sets the locale for relative and absolute date formats.
format'relative' | 'date''relative'Selects relative text or an absolute UTC date.
tooltipbooleantrueShows the exact local and UTC time on hover, tap, or Enter. Set it to false to render plain text.
tabIndexnumber0Sets keyboard focus order.