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

...