Formats timestamps as relative time for activity feeds, audit logs, and notifications.
RelativeTime defines how EnterUI handles time-relative labels, including deterministic rendering, client-side refresh, and semantic <time> output.
Relative labels keep audit and feed rows scannable.
<RelativeTime date="2026-05-05T09:55:00.000Z" now="2026-05-05T10:00:00.000Z" />import { RelativeTime, TimeAgo } from "@froggdesign/enter-ui-react";Use now in tests and deterministic examples. Omit it in app UI to let the component refresh on the client with updateInterval.
<TimeAgo date={activity.createdAt} updateInterval={30000} />RelativeTime renders a semantic <time> element with a datetime attribute when the date is valid. The visible text is generated with Intl.RelativeTimeFormat.
date: Date | number | string.now: deterministic comparison date.locale: locale passed to Intl.RelativeTimeFormat.numeric: always | auto.updateInterval: client refresh interval in milliseconds.formatFallback: fallback renderer for invalid dates.RelativeTime uses .eui-relative-time and muted foreground tokens. Numeric glyphs use tabular alignment so feed rows stay stable as time changes.