Timestamp
@astryxdesign/core v0.7.1 · Timestamp
Usage
Timestamp renders one instant in a <time> element. value is an ISO string or a unix timestamp in seconds. The default format is auto: a relative phrase while the instant is inside autoThreshold (seven days), then date_time.
hasTooltip is on by default and opens a hover card that can be copied. Pass tooltipEntries to list the same instant in several zones or formats. isTimezoneShown appends a short zone name to date_time and time. isLive refreshes a relative reading on a short interval.
Relative text keeps a long zone name in aria-label, so the accessible name does not depend on the tooltip.
<script setup lang="ts">
import { Timestamp } from '@astryx-vue/core/Timestamp'
</script>
<template>
<Timestamp value="2026-03-25T12:00:00Z" color="primary" />
</template>Anatomy
| Element | Description |
|---|---|
| Formatted text | The rendered date, time, or relative label like "2 hours ago" or "Mar 21, 2025". |
| Hover card | A copyable hover card showing the full absolute date and time when the display is relative, or the rows configured via tooltipEntries. Its default single row carries the full absolute time. |
| Hover card row | One row of the card: an optional label beside the instant rendered in one time zone and format. Rows opt into a copy button via isCopyable. |
| Copy button | Per-row copy-to-clipboard button in the hover card; copies that row's formatted value. |
Best practices
| Guidance | Practices |
|---|---|
| Do | Use auto in feeds and comments. Recent events stay relative, older ones become a full date. |
| Do | Use system_date, system_date_time, and system_time in logs, with type="code". |
| Do | Pass tooltipEntries when a reader must compare the local zone with the zone where an event happened. |
| Don't | Turn the tooltip off for a relative format unless something else nearby states the absolute time. |
| Don't | Append a zone to a system format. Those strings stay machine-readable. |
Examples
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 accent.
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.