Timestamp formats a date or time value into human-readable text. Use it to show when something was created, updated, or is scheduled — picking relative for recency, absolute for precision, or auto to let the component decide.
ts
| Guidance | Practices |
|---|---|
| Do | Use the auto format in feeds and lists so recent items show “2 hours ago” and older items show the full date automatically. |
| Do | Keep formatting consistent within the same list or table — mixing relative and absolute timestamps in the same column confuses scanning. |
| Do | Enable isTimezoneShown when the audience spans multiple time zones, like a global team calendar or audit log. |
| Do | Use isLive for active dashboards or real-time feeds so the relative time stays accurate without a page refresh. |
| Don't | Don’t display raw Unix timestamps or ISO strings to users — always pass them through Timestamp to get a human-readable format. |
| Don't | Avoid system_date or system_time formats in user-facing UI — they are meant for developer tools, logs, and machine-readable contexts. |
| Don't | Don’t disable the tooltip on relative timestamps — users expect to hover for the full date when they see “3 hours ago”. |
Auto format that shows relative time for recent dates and switches to the full date for older ones. The default choice for most use cases.
Timestamp rendered in each available color variant: primary, secondary, disabled, and active.
All display formats side by side: date, date_time, time, and their system equivalents. Use date and date_time for user-facing UI, system variants for logs and dev tools.
Relative time labels from seconds to months ago, with hover tooltips showing the full date. Use in feeds, comment threads, and activity logs.
Timestamps with the timezone abbreviation appended. Enable isTimezoneShown for audiences across time zones, like audit logs or team calendars.