Timestamp @astryx-svelte/core v0.3.0 · Timestamp
Usage
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
Best practices
| 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 tooltipEntries when readers must compare zones, such as an incident log where the reader's time and the event's origin zone both matter. |
| Do | Label every entry once a tooltip shows more than one zone; a bare abbreviation is not always recognizable (Tokyo renders as "GMT+9", not "JST"). |
| Do | Use isLive for active dashboards or real-time feeds so the relative time stays accurate without a page refresh. |
| Do | Reach for tooltipEntries when readers need to grab an exact value — an incident log or deploy record where someone pastes the UTC time or Unix seconds elsewhere; configuring entries turns the hover into copy-to-clipboard rows. |
| 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 hover card on relative timestamps; users expect to hover for the full date when they see "3 hours ago". |
| Don't | Don't stack many zones into one card; it is capped at 300px wide and long labelled lines wrap. Two or three entries read well. |
| Don't | Don't pass a fixed-offset abbreviation like "EST" as timezoneID; it is a valid identifier but never observes daylight saving, so it reads an hour wrong for half the year. Use the region id, "America/New_York". |
Examples
Common configurations, variations, and states.Timestamp — Auto
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 — Colors
Timestamp rendered in each available color variant: primary, secondary, disabled, and active.
Timestamp — Formats
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.
Timestamp — Relative
Relative time labels from seconds to months ago, with hover tooltips showing the full date. Use in feeds, comment threads, and activity logs.
Timestamp — Timezone
Timestamps with the timezone abbreviation appended. Enable isTimezoneShown for audiences across time zones, like audit logs or team calendars.
Timestamp — Tooltip time zones
Hover tooltips that show one instant across several time zones or formats. Use tooltipEntries when readers must compare zones, like an incident log carrying both the reader's time and the event's origin zone.