Bifrost Design System

React

import FormatRelativeTime from "@intility/bifrost-react/FormatRelativeTime";

FormatRelativeTime

Go to top

Props

Also see useRelativeTime()

If you need a static string.

Also see <FormatDate>

Date formatting without relative time.

Relative time formatting

Pass in a Date object to date prop to display a relative time string (e.g., "5 minutes ago", "in 2 days"), including a tooltip on hover with the full date and time.

The component automatically chooses the most appropriate unit (seconds, minutes, hours, days, months, or years) based on the time difference:

<FormatRelativeTime date={myDate} />

5 minutes ago2 hours ago3 days agoin 2 days

The component will automatically re-render to keep the displayed relative time up to date as time passes. For example;

"5 minutes ago" will update to "6 minutes ago" after one minute
"1 second ago" will update to "2 seconds ago" after one second

This page loaded at 10/02/2026 14:45 which is now: now

Locale

FormatRelativeTime follows current bifrost locale (default english).
Use <Bifrost locale={nbNO}> in your app to use norwegian formatting.

Norwegian

<Bifrost locale={nbNO}>
  <FormatRelativeTime date={myDate} />
</Bifrost>

for 5 minutter sidenfor 2 timer sidenfor 3 døgn sideni overmorgen

Swedish

<Bifrost locale={svSE}>
  <FormatRelativeTime date={myDate} />
</Bifrost>

för 5 minuter sedanför 2 timmar sedanför 3 dagar sedanom 2 dagar

By default, the component shows a tooltip on hover with the full date and time (including month name, time, and timezone) to provide context for the relative time. If you don't want a tooltip, you can hide it with the noTooltip prop:

<FormatRelativeTime date={myDate} noTooltip />

No tooltip on hover: 5 minutes ago

Sandbox

Open Sandbox

import FormatRelativeTime from "@intility/bifrost-react/FormatRelativeTime";
import Grid from "@intility/bifrost-react/Grid";

export default function FormatRelativeTimeDemo() {
  const now = new Date();

  const janFirst2026ISOString = "2026-01-01T12:00:00Z";

  // calculations for demo purposes only;
  // in a real app, you would use a fixed date from your data source instead
  const fiveMinutesAgo = new Date(now.getTime() - 5 * 60 * 1000);
  const twoHoursAgo = new Date(now.getTime() - 2 * 60 * 60 * 1000);
  const threeDaysAgo = new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000);
  const inTwoDays = new Date(now.getTime() + 2 * 24 * 60 * 60 * 1000);

  return (
    <Grid>
      <div>
        page loaded: <FormatRelativeTime date={now} />
      </div>
      <div>
        page loaded (no tooltip): <FormatRelativeTime date={now} noTooltip />
      </div>
      <div>
        Jan 1, 2026 string:
        <FormatRelativeTime date={janFirst2026ISOString} />
      </div>
      <div>
        equivalent date object:
        <FormatRelativeTime date={new Date(janFirst2026ISOString)} />
      </div>
      <FormatRelativeTime date={fiveMinutesAgo} />
      <FormatRelativeTime date={twoHoursAgo} />
      <FormatRelativeTime date={threeDaysAgo} />
      <FormatRelativeTime date={inTwoDays} />
    </Grid>
  );
}

Relative time formatting

Locale

Norwegian

Swedish

Hide tooltip

Sandbox