Timestamp

Displays a single moment in time as a semantic `<time>` element, either relative to now ("2 hours ago") or as an absolute date/time.

Examples

Basic

Mar 21, 2025, 2:51 PM

<Timestamp format="auto" value={SAMPLE} />

All Formats

relativelast year

Mar 21, 2025, 2:51 PM UTC

dateMar 21, 2025

time2:51 PM

dateTimeMar 21, 2025, 2:51 PM

systemDate2025-03-21

systemTime14:51:53

systemDateTime2025-03-21 14:51:53

<div
  style={{
    display: 'grid',
    gap: '0.75rem',
    gridTemplateColumns: 'auto 1fr',
  }}>
  {formats.map(format => (
    <div key={format} style={{display: 'contents'}}>
      <Text color="secondary" size="sm">
        {format}
      </Text>
      <Timestamp format={format} value={SAMPLE} />
    </div>
  ))}
</div>

Relative

2 hours ago

Jul 10, 2026, 8:05 PM UTC

<Timestamp
  format="relative"
  value={Temporal.Now.instant().subtract({hours: 2})}
/>

With Timezone

Mar 21, 2025, 2:51 PM UTC

<Timestamp format="dateTime" value={SAMPLE} isTimezoneShown />

Tooltip On Hover

3 days ago

Jul 7, 2026, 10:05 PM UTC

<Timestamp
  format="relative"
  value={Temporal.Now.instant().subtract({hours: 72})}
/>

API

Timestamp

Displays a single moment in time as a semantic `<time>` element, either relative to now ("2 hours ago") or as an absolute date/time.

Prop	Type	Default	Description
autoThreshold	number	604800 (7 days)	In auto mode, the maximum age in seconds for which a relative string is shown before falling back to an absolute date/time.
className	string	—	Additional CSS class names applied to the element.
color	"primary" | "secondary" | "disabled" | "inherit" | "placeholder" | "active"	'secondary'	Text color token. Passed through to the underlying Text.
data-testid	string	—	Test ID applied to the element.
format	"auto" | "time" | "date" | "dateTime" | "relative" | "systemDate" | "systemTime" | "systemDateTime"	'auto'	How to format the timestamp.
hasTooltip	boolean	true	Whether to show a tooltip with the full absolute date/time on hover. Only applies while the visible text is relative.
isTimezoneShown	boolean	false	Whether to append the timezone abbreviation to absolute (non-system) formats.
ref	Ref<HTMLTimeElement>	—	Ref forwarded to the <time> element.
size	"sm" | "md" | "lg" | "inherit" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl"	—	Font size token. Passed through to the underlying Text.
style	CSSProperties	—	Inline styles applied to the element.
type	"body" | "code" | "label" | "large" | "supporting" | "inherit" | "display-1" | "display-2" | "display-3"	'supporting'	Typographic preset. Passed through to the underlying Text.
value*	TimestampValue	—	The moment to display. Accepts a Temporal.Instant or ZonedDateTime, a Unix epoch timestamp in **seconds**, or an ISO 8601 string.
weight	"medium" | "inherit" | "normal" | "semibold" | "bold"	—	Font weight. Passed through to the underlying Text.