Skip to content

Time ​

Timestamps can be absolute or relative:

Absolute time: prints the given time in a localized way. (e.g. 9:27 PM) Relative time: prints the relative time between the current time (when the component is rendered) and the given one in a short sentence. Works for past and future (e.g. β€œ25 minutes ago” or β€œin 10 hours”).

When to use ​
  • Use absolute timestamps when users need a specific date and time for when an event occurred or will occur.

  • Use relative timestamps when the accuracy of the date and time is not important, and users only need to get a quick idea of how far in time the event occurred or will occur.

Specifications ​

You can use the min and max attributes to restrict the valid times that can be chosen by the user

In relative timestamps:

Time can be displayed in seconds, minutes, hours, day, week, month, quarter, year.

Consider converting the units of relative timestamps once time passes (e.g. β€œ72 hours ago” would be more difficult to understand for users than β€œ3 days ago”).

Time frameUnit
0-59 secondsNow
1-59 seconds# minutes ago
1-24 hours# hours ago
1-31 days# days ago
1-4 weeks# weeks ago
1-12 months# months ago
More than 12 months# years ago

In absolute timestamps:

Time can be displayed in 24h or 12h formats, based on system locale. Seconds are optionally to display.

Format ​

In addition to the time, you can display the weekday either in long (e.g. Monday), short (e.g. Mon), or narrow (e.g. M) formats.

For detailed information about Time, read <input type="time"/>

From Figma to code ​

...

Customization ​

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS VariableTypeDescription

...