Skip to content

Primer Design System

Primer Design System

Site navigation

Relative time

Relative time displays time in a way that is clear, concise, and accessible.

On this page

v0.24.0BetaNot reviewed for accessibility

Description

Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.

Arguments

Name	Default	Description
datetime	N/A	`Time` The time to be formatted.
tense	`:auto`	`Symbol` Which tense to use. One of `:auto`, `:future`, or `:past`.
prefix	`nil`	`sring` What to prefix the relative ime display with.
second	`SECOND_DEFAULT`	`Symbol` What format seconds should take. One of `nil`, `:numeric`, or `:two_digit`.
minute	`MINUTE_DEFAULT`	`Symbol` What format minues should take. One of `nil`, `:numeric`, or `:two_digit`.
hour	`HOUR_DEFAULT`	`Symbol` What format hours should take. One of `nil`, `:numeric`, or `:two_digit`.
weekday	`WEEKDAY_DEFAULT`	`Symbol` What format weekdays should take. One of `nil`, `:long`, `:narrow`, or `:short`.
day	`DAY_DEFAULT`	`Symbol` What format days should take. One of `nil`, `:numeric`, or `:two_digit`.
month	`MONTH_DEFAULT`	`Symbol` What format months should take. One of `nil`, `:long`, `:narrow`, `:numeric`, `:short`, or `:two_digit`.
year	`YEAR_DEFAULT`	`Symbol` What format years should take. One of `nil`, `:numeric`, or `:two_digit`.
time_zone_name	`TIMEZONENAME_DEFAULT`	`Symbol` What format the time zone should take. One of `nil`, `:long`, `:long_generic`, `:long_offset`, `:short`, `:short_generic`, or `:short_offset`.
threshold	`nil`	`string` The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
precision	`PRECISION_DEFAULT`	`Symbol` The precision elapsed time should display. One of `nil`, `:day`, `:hour`, `:minute`, `:month`, `:second`, or `:year`.
format	`nil`	`Symbol` The format the display should take. One of `:auto`, `:elapsed`, or `:micro`.
format_style	`nil`	`Symbol` The format the display should take. One of `nil`, `:long`, `:narrow`, or `:short`.
lang	`nil`	`string` The language to use.
title	`nil`	`string` Provide a custom title to the element.
system_arguments	N/A	`Hash` System arguments

Examples